antd3x Upload自定义上传不显示进度条解决

Upload customRequest 事件

Antd CustomRequest Docs

customRequest callback 会返回一个对象

1
2
3
function customRequest(info) {
  const {onProgress, onError, onSuccess, data, filename, file, withCrredentials, action, headers} = info;
}

我们需要用到 onProgress 和 onSuccess 事件。

一般来说自定义上传方法时，可以添加一个 onProgress 事件

1
2
3
4
function onProgress({total, loaded}) {
  const percent = Math.round((loaded / total) * 100).toFixed(2);
  console.log(percent);
}

通过计算 total 和 loaded 可以得出当前进度

然后调用 customRequest info.onProgress

1
info.onProgress({ percent: percent }, info.file);

上传成功后可以在 then 中设置 info.onSuccess

但当设置 fileList 参数时设置进度可能不会生效

这时我们择需要在自定义请求的 onProgress 触发时，重新设置 fileList，并且为当前上传文件的那一项添加 percent 字段手动设置进度