Skip to main content

背景​

使用自定义上传覆盖原有上传方式，虽然实现了上传终止的功能，但却发现进度条一动不动了。

解决代码​

customRequest(options) {
  let { file, onSuccess, onError, onProgress } = options
  const formData = new FormData()
  formData.append('file', file);
  axios.post(url.project.newUploadSources, formData, {
    headers: {
      token
    },
    onUploadProgress: ({ total, loaded }) => {
      onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file)
    },
  }).then((res) => {
    onSuccess(res.data, file)
  }).catch((res) => {
    onError(res.data, file)
  })
},

onUploadProgress​

这个方法并不是antd提供的，而是axios的配置之一。一个上传处理进度的事件。

loaded表示当前已上传的数据大小，total表示整个要上传的数据大小。

customRequest​

这个参数在官网上并没有过多的介绍，在github上有对参数的简单介绍。

image