ant design Upload组件的使用总结。

事先说明：upload 所使用"rc-upload"组件在npm是有单独的包，upload对其进一步封装。"rc-upload"

有更多的API选择。

需求

要求限制上传图片的格式、大小、分辨率。

简单介绍

这是一个最简单的upload组件使用

<Upload action="...">
    上传
</Upload>

简单说一下关键几个参数

参数	作用
action	上传的服务器地址，使用默认上传行为必填
beforeUpload	默认上传行为之前的钩子函数，用来限制上传文件
customRequest	自定义上传（本文关键）
fileList	已上传列表

本文的关键就在于customRequest、fileList和onRemove三个api。

平常使用

该组件已经将上传文件封装的及其简单

<Upload action="..." onChange={...} beforeUpload={...}>
    上传
</Upload>

在所有提供的钩子函数都会接受file参数。它就是用户上传文件的RcFile形式。

主要参数有

{
   type     // 文件格式
   size     // 文件大小
   status   // 状态有：uploading done error removed 只有在onChange事件才会变化
   response // 服务端响应内容，
}

在beforeUpload调用file的type和size来限制上传文件。beforeUpload如果返回false就是取消上传行为。

来至官网的示例

function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJPG && isLt2M;
}

当文件开始上传的时候，这时候调用onChange 读取到file.response获取到服务端的回调,来实现我们的功能。

进一步使用

1. 显然默认的行为不能实现我的要求，file对象并没有分辨率的参数。我所采用的是把上传的图片实例化读取它的高宽。这样出现一个问题。image只有在触发load事件之后才能被读取宽高，我们没有办法将我们的判断传递给beforeUpload，也就阻止不了上传事件。

const { file } = files
// files是customRequest参数
const reader = new FileReader();
    reader.addEventListener("load", e => {
      const data = e.target.result;
      //加载图片获取图片真实宽度和高度
      const image = new Image();
      image.addEventListener("load", () => {
        const w = image.width;
        const h = image.height;
      });
      image.src = data;
    });
 reader.readAsDataURL(file);
// 我们传递不出false。

所有只能使用customRequest来覆盖默认上传。但这样有两个弊端。

1. 上传状态无法被onChange捕获。

2. 我们需要自己控制fileList。

3. 组件showUploadList会出现我们不想展示的图片。

其实到这一步已经可以实现效果，但是我想要组件的showUploadList所展示的上传列表，毕竟别人已经写好动画了。

所有我们要控制fileList于state绑定，初始值设为[]，上传成功后fileList增加新的元素。

customRequest = (files) => {
    const { file } = files
    ...// 前面限制
    let formData = new FormData();
    formData.append("file", file);
    http('',formData).then(
       res =>
        this.setState(() => ({ fileList: [{ ...file }, { url, status: "done" }] }));
    )
}

设置的fileList是安装官方defaultFileList 的形式添加的

{
    uid: '1',
    name: 'xxx.png',
    status: 'done',
    response: 'Server Error 500', // custom error message to show
    url: 'http://www.baidu.com/xxx.png',
  }

onRemove

使用了showUploadList就需要使用onRemove来删除文件列表元素。我们先看看onRemove的介绍

点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除

由于同时涉及到表单我也用了Form组件，同样也要使用Form组件的表单验证。

onRemove = () => {
    this.setState(() => ({
        fileList: []
  }));
}

图片是删除里但是并没有触发Form的验证。Form都是靠表单的onChange来触发的。所有查了一下源码。

handleRemove(file: UploadFile) {
    const { onRemove } = this.props;
    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
      // Prevent removing file
      if (ret === false) {
        return;
      }

      const removedFileList = removeFileItem(file, this.state.fileList);
      if (removedFileList) {
        this.onChange({
          file,
          fileList: removedFileList,
        });
      }
    });
  }

其中的 removeFileItem 如下

export function removeFileItem(file: UploadFile, fileList: UploadFile[]) {
  const matchKey = file.uid !== undefined ? 'uid' : 'name';
  const removed = fileList.filter(item => item[matchKey] !== file[matchKey]);
  if (removed.length === fileList.length) {
    return null;
  }
  return removed;
}

可以看出之前fileList已被我们设为[]，removeFileItem 返回为null，所以没有触发onChange。没办法，我们只能自己触发了,传入参数上面的代码已给出。

<Upload ref = ref => this.ref = ref>
    上传
</Upload>

onRemove = () => {
    ...// 前面操作
    this.ref.onChange({file,[]})
}

至此我个人所有需求全部解决。但是我在逛github的Issues 的时候发现有人提这样无法获取上传的进度。

ajax是有原生获取上传文件进度的方法的。我使用的是axios的onUploadProgress方法。

 onUploadProgress:(progressEvent) => { 
    const {lengthComputable, loaded, total} = progressEvent 
    lengthComputable, //是否能够被读取长度
    loaded// 已上传,
    total //以下载    
 }