Upload 上传组件

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

用户根据提示将自己本地的相应信息(包含本地和云储存)上传到网站，上传组件可以帮助用户对上传过程和上传结果有预期，并可以更改或撤销上传行为。

onChange

文件状态改变的回调，返回为：

{
  file: { ... },
  fileList: [ ... ],
  event: { ... }
}

• file 当前操作的文件对象。

{ 
  uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 
  name: 'xx.png' // 文件名 
  status: 'done', // 状态有：uploading done error removed 
  response: '{"status":"success"}' // 服务端响应内容 
  fileURL: '<http://kfupload.example.com/kf-down/HTB1dRttMXXXXXaxaXXXq6xXFXXXU.jpg?size=23616&height=200&width=200&hash=58d62cf6a9633667b9d728d7120a9350>', 
  imgURL: '<http://kfupload.example.com/kf-down/HTB1dRttMXXXXXaxaXXXq6xXFXXXU.jpg?size=23616&height=200&width=200&hash=58d62cf6a9633667b9d728d7120a9350>', 
}

如果上传控件是 multiple 时，此参数将为一个对象数组 [file, …]。

• fileList 当前的文件列表。

• event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

onSuccess(res, file)

• res 后台返回的响应信息。

• file 当前操作的文件对象。

• ​

  { uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png' // 文件名 status: 'done', // 状态 response: '{"status": "success"}' // 服务端响应内容 fileURL: '<http://kfupload.example.com/kf-down/HTB1dRttMXXXXXaxaXXXq6xXFXXXU.jpg?size=23616&height=200&width=200&hash=58d62cf6a9633667b9d728d7120a9350>', imgURL: '<http://kfupload.example.com/kf-down/HTB1dRttMXXXXXaxaXXXq6xXFXXXU.jpg?size=23616&height=200&width=200&hash=58d62cf6a9633667b9d728d7120a9350>', }

onRemove(file, fileList)

• file 当前操作的文件对象。

{ 
  uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 
  name: 'xx.png' // 文件名 
  status: 'removed', // 状态 
  response: '{"status": "success"}' // 服务端响应内容 
  fileURL: '<http://kfupload.example.com/kf-down/HTB1dRttMXXXXXaxaXXXq6xXFXXXU.jpg?size=23616&height=200&width=200&hash=58d62cf6a9633667b9d728d7120a9350>', 
  imgURL: '<http://kfupload.example.com/kf-down/HTB1dRttMXXXXXaxaXXXq6xXFXXXU.jpg?size=23616&height=200&width=200&hash=58d62cf6a9633667b9d728d7120a9350>',
}

• fileList 当前的文件列表。

显示下载链接

请使用 fileList 属性设置数组项的 url 属性进行展示控制。

返回数据格式要求

// 标准 JSON 字符串
{
  "code": "0",                                           // 状态码，0 代表成功
  "imgURL": "http://kfupload.example.com/a.png",         // 图片预览地址
  "downloadURL": "http://kfupload.example.com/a.png",    // 文件下载地址 (可选)
  "size": "1024",                                        // 文件大小 (可选)
  "fileHeight": "50",                                    // 图片高度，非图片类型不需要 (可选)
  "fileWidth": "50",                                     // 图片宽度，非图片类型不需要 (可选)
  "fileMd5": "ddahsjccbajh"                              // 文件 hash 值 (可选)
}

后端数据格式化

通过 formatter 将来自后端的不规则数据转换为符合组件要求的数据格式

• 假设 服务器的响应数据如下

{
 "status": "success", // 上传成功返回码 
 "img_src": "<http://kfupload.example.com/a.jpg>", // 图片链接
 "img_size": 1024 // 文件大小 
}

• 转换方法

// 函数里面根据当前服务器返回的响应数据 
// 重新拼装符合组件要求的数据格式 
function formatter(res) {
  return { 
    code: res.status === 'success' ? '0' : '1', 
    imgURL: res.img_src, 
    size: res.img_size 
  };
}

IE9兼容性

• ie9 下用因为使用 iframe 作为无刷新上传方案，必须保证表单页面的域名和上传的服务器端的域名相同。

• ie9 下服务器端返回数据需要设置头部 context-type 为 text/html，不要设置为 application/json

• 如果只是一级域名相同（taobao.com 为一级域名 shop.taobao.com 为二级域名），可以通过降域的方式实现跨域上传。

假设你表单页面的域是：shop.taobao.com，而上传的服务器端路径却是 upload.taobao.com。服务端返回必须带额外 scrip t标签

<script>document.domain = "taobao.com";</script>
{"status":1,"type":"ajax","name":"54.png","url":".\/files\/54.png"}

iframe上传会额外传递参数 _documentDomain 方便你设置域名

API

上传组件

Upload.ImageUpload

Upload.DragUpload

Upload.CropUpload

Upload.Core

Upload.List

方法

签名:Function(e: Event) => void参数:e: {Event} 拖拽事件返回值:{void} null

签名:Function(files: FileList) => void参数:files: {FileList} 文件列表返回值:{void} null

签名:Function(response: Object, file: File) => void参数:response: {Object} 服务器响应file: {File} 文件对象返回值:{void} null

签名:Function(file: File) => void参数:file: {File} null返回值:{void} null

签名:Function(file: File) => void参数:file: {File} null返回值:{void} null

代码示例

核心上传

查看源码在线预览

import { Upload, Button } from "@icedesign/base";
const { Core } = Upload;
class UploadCore extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false,
      dragable: false
    };
    /* eslint-disable */
    ["onDisabledHandler", "onDragableHandler", "onAbortHandler"].map(fn => {
      this[fn] = this[fn].bind(this);
    });
    /* eslint-enable */
  }
  onDisabledHandler() {
    this.setState({
      disabled: !this.state.disabled
    });
  }
  onDragableHandler() {
    this.setState({
      dragable: !this.state.dragable
    });
  }
  onAbortHandler() {
    this.refs.inner.abort();
  }
  render() {
    return (
      <div>
        <Core
          ref="inner"
          style={{
            display: "block",
            textAlign: "center",
            width: "200px",
            height: "150px",
            lineHeight: "150px",
            border: "1px dashed #aaa",
            borderRadius: "5px",
            fontSize: "12px"
          }}
          action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
          accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
          name="filename"
          disabled={this.state.disabled}
          multiple
          dragable={this.state.dragable}
          multipart={{ _token: "sdj23da" }}
          headers={{ Authorization: "user_1" }}
          beforeUpload={beforeUpload}
          onStart={onStart}
          onProgress={onProgress}
          onSuccess={onSuccess}
          onError={onError}
          onAbort={onAbort}
        >
          {this.state.disabled
            ? "禁止上传"
            : this.state.dragable ? "支持点击或者拖拽上传" : "支持点击上传"}
        </Core>
        <br />
        <div>
          <Button type="primary" onClick={this.onDisabledHandler}>
            切换 disabled 状态
          </Button>&nbsp;
          <Button type="primary" onClick={this.onDragableHandler}>
            切换 dragable 状态
          </Button>&nbsp;
          <Button type="primary" onClick={this.onAbortHandler}>
            中断全部上传
          </Button>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<UploadCore />, mountNode);
function beforeUpload(file) {
  console.log("beforeUpload callback : ", file);
}
function onStart(files) {
  console.log("onStart callback : ", files);
}
function onProgress(e, file) {
  console.log("onProgress callback : ", e, file);
}
function onSuccess(res, file) {
  console.log("onSuccess callback : ", res, file);
}
function onError(err, res, file) {
  console.log("onError callback : ", err, res, file);
}
function onAbort(e, file) {
  console.log("onAbort callback : ", e, file);
}

裁剪上传

查看源码在线预览

import { Upload, Button, Dialog } from "@icedesign/base";
const { CropUpload } = Upload;
class CropUploadApp extends React.Component {
  constructor(props) {
    super(props);
    this.onSuccess = this.onSuccess.bind(this);
  }
  beforeCrop(file) {
    console.log("beforeCrop callback : ", file);
    // 返回 `false` 的方式
    if (file.size > 1024 * 1024 * 3) {
      Dialog.alert({
        content: "图片尺寸超过最大限制 3MB，请重新选择！",
        closable: false,
        title: "裁剪提醒"
      });
      return false;
    }
    // 返回 `promise` 的方式
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const img = new Image();
        img.onload = () => {
          if (img.width <= 1200) {
            resolve();
          } else {
            Dialog.alert({
              content: `图片宽度为${
                img.width
              }px, 超过最大限制 1200px，请重新选择！`,
              closable: false,
              title: "裁剪提醒"
            });
            reject(); // resolve(false) 也能阻断流程
          }
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(file);
    });
  }
  onCrop(dataUrl) {
    console.log("onCrop callback : ", dataUrl);
  }
  beforeUpload(file) {
    console.log("beforeUpload callback : ", file);
  }
  onChange(file) {
    console.log("onChange callback : ", file);
  }
  onSuccess(res, dataUrl) {
    console.log("onSuccess callback : ", res);
    this.refs.targetViewer.src = dataUrl;
  }
  render() {
    return (
      <CropUpload
        action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
        preview
        previewList={[80, 60, 40]}
        minCropBoxSize={100}
        beforeCrop={this.beforeCrop}
        onCrop={this.onCrop}
        beforeUpload={this.beforeUpload}
        onChange={this.onChange}
        onSuccess={this.onSuccess}
      >
        {/* CropUpload 内嵌的标签会成为呼出系统弹窗的 trigger */}
        <Button type="primary" style={{ margin: 0 }}>
          上传头像
        </Button>
        <div style={{ marginTop: "20px" }}>
          <img
            ref="targetViewer"
            src="https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
            width="120px"
            height="120px"
          />
        </div>
        {/* trigger end */}
      </CropUpload>
    );
  }
}
ReactDOM.render(<CropUploadApp />, mountNode);

自定义上传参数

next@0.19.5 开始参数从 multipart 改造为 data

查看源码在线预览

import { Upload, Button } from "@icedesign/base";
ReactDOM.render(
  <Upload
    listType="text"
    action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
    data={{ token: "abcd" }}
    beforeUpload={beforeUpload}
    onChange={onChange}
    defaultFileList={[
      {
        name: "IMG.png",
        status: "done",
        size: 1024,
        downloadURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        fileURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        imgURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
      }
    ]}
  >
    <Button type="primary" style={{ margin: "0 0 10px" }}>
      上传文件
    </Button>
  </Upload>,
  mountNode
);
function beforeUpload(info) {
  console.log("beforeUpload callback : ", info);
}
function onChange(info) {
  console.log("onChane callback : ", info);
}

拖拽上传

查看源码在线预览

import { Upload } from "@icedesign/base";
const { DragUpload } = Upload;
ReactDOM.render(
  <DragUpload
    action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
    onDragOver={onDragOver}
    onDrop={onDrop}
  />,
  mountNode
);
function onDragOver() {
  console.log("dragover callback");
}
function onDrop(fileList) {
  console.log("drop callback : ", fileList);
}

内容回填

查看源码在线预览

import { Upload, Button, Field, Form } from "@icedesign/base";
const { ImageUpload } = Upload;
const FormItem = Form.Item;
const fileList = [
  {
    name: "pic.png",
    fileName: "pic.png",
    status: "done",
    size: 1000,
    downloadURL:
      "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    fileURL:
      "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    imgURL:
      "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
  }
];
class App extends React.Component {
  field = new Field(this, {
    deepReset: true // 打开清楚特殊类型模式(fileList是数组需要特别开启)
  });
  setValues = () => {
    this.field.setValues({
      upload: [...fileList]
    });
  };
  getValues = () => {
    const values = this.field.getValues();
    console.log(values);
  };
  normFile = info => {
    if (info.file.status === "uploading") {
      console.log("正在上传文件，请稍后！");
    }
    if (info.file.status === "error") {
      console.log("上传文件出错，请重新上传！");
    }
    if (info.file.status === "done") {
      console.log("上传文件成功！");
    }
    if (info.fileList && info.fileList.length) {
      return info.fileList;
    }
    return [];
  };
  render() {
    const init = this.field.init;
    return (
      <Form field={this.field}>
        <FormItem>
          <ImageUpload
            listType="picture-card"
            action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
            accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
            {...init("upload", {
              valueName: "fileList",
              initValue: fileList,
              getValueFromEvent: this.normFile,
              rules: [{ required: true, message: "列表不能为空" }]
            })}
          />
        </FormItem>
        <div>
          <Button
            onClick={this.setValues}
            type="primary"
            style={{ margin: "0 0 10px" }}
          >
            设置数据
          </Button>&nbsp;&nbsp;
          <Button
            onClick={this.getValues}
            type="primary"
            style={{ margin: "0 0 10px" }}
          >
            获取数据
          </Button>&nbsp;&nbsp;
          <Button
            onClick={() => this.field.reset()}
            type="primary"
            style={{ margin: "0 0 10px" }}
          >
            重置
          </Button>&nbsp;&nbsp;
          <Button
            onClick={() => this.field.validate()}
            type="primary"
            style={{ margin: "0 0 10px" }}
          >
            校验
          </Button>
        </div>
      </Form>
    );
  }
}
ReactDOM.render(<App />, mountNode);

图片上传（卡片式）

查看源码在线预览

import { Upload } from "@icedesign/base";
const { ImageUpload } = Upload;
ReactDOM.render(
  <ImageUpload
    listType="picture-card"
    action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
    locale={{
      image: {
        cancel: "取消上传",
        addPhoto: "上传图片"
      }
    }}
    beforeUpload={beforeUpload}
    onChange={onChange}
    onSuccess={onSuccess}
    onError={onError}
    defaultFileList={[
      {
        name: "IMG.png",
        status: "done",
        downloadURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        fileURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        imgURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
      }
    ]}
  />,
  mountNode
);
function beforeUpload(info) {
  console.log("beforeUpload callback : ", info);
}
function onChange(info) {
  console.log("onChane callback : ", info);
}
function onSuccess(res, file) {
  console.log("onSuccess callback : ", res, file);
}
function onError(file) {
  console.log("onError callback : ", file);
}

文件上传

查看源码在线预览

import { Upload } from "@icedesign/base";
const fileList = [
  {
    fileName: "IMG.png",
    status: "done",
    size: 1024,
    downloadURL:
      "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    fileURL:
      "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    imgURL:
      "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
  }
];
const cell = (file, idx) => {
  return (
    <div className="custom" key={idx}>
      <img src={file.imgURL} />
      <span>
        <li> {file.fileName} </li>
        <li> {file.size / 1024}KB</li>
      </span>
    </div>
  );
};
ReactDOM.render(
  <div>
    <Upload.List listType="text" fileList={fileList} />
    <br />
    <Upload.List listType="text-image" fileList={fileList} />
    <br />
    <Upload.List listType="picture-card" fileList={fileList} />
    <br />自定义内容
    <Upload.List listType="text-image" cell={cell} fileList={fileList} />
  </div>,
  mountNode
);

.custom img {
    width: 50px;
    height: 50px;
    float: left;
}
.custom span {
    float: left;
    color: blue;
    margin-left: 10px;
}
.custom li {
    list-style: none;
    line-height: 25px;
}

图片上传

查看源码在线预览

import { Upload, Button } from "@icedesign/base";
ReactDOM.render(
  <Upload
    listType="text-image"
    action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
    beforeUpload={beforeUpload}
    onChange={onChange}
    defaultFileList={[
      {
        name: "IMG.png",
        status: "done",
        size: 100,
        downloadURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        fileURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        imgURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
      }
    ]}
  >
    <Button type="primary" style={{ margin: "0 0 10px" }}>
      上传文件
    </Button>
  </Upload>,
  mountNode
);
function beforeUpload(info) {
  console.log("beforeUpload callback : ", info);
}
function onChange(info) {
  console.log("onChane callback : ", info);
}

文件上传

查看源码在线预览

import { Upload, Button } from "@icedesign/base";
ReactDOM.render(
  <Upload
    listType="text"
    action="//www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // 该接口仅作测试使用，业务请勿使用
    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
    beforeUpload={beforeUpload}
    onChange={onChange}
    onSuccess={onSuccess}
    multiple
    defaultFileList={[
      {
        name: "IMG.png",
        status: "done",
        size: 1024,
        downloadURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        fileURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        imgURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
      }
    ]}
  >
    <Button type="primary" style={{ margin: "0 0 10px" }}>
      上传文件
    </Button>
  </Upload>,
  mountNode
);
function beforeUpload(info) {
  console.log("beforeUpload : ", info);
}
function onChange(info) {
  console.log("onChane : ", info);
}
function onSuccess(info) {
  console.log("onSuccess : ", info);
}

相关区块

暂无相关区块