ant-design-vue 3.x Upload组件如何实现上传失败点击按钮重新上传

问题原因 #

当前直接把itemRender提供的file对象传入filesUpload方法无法生效，核心原因是：

• customRequest接收的入参是组件内部包装过的上传对象，包含原生文件、onProgress/onSuccess/onError三个状态回调方法
• 自定义列表项拿到的file是仅存储状态的文件元对象，既没有原生文件的正确引用，也没有状态回调方法，直接传入上传方法必然报错

实现步骤 #

1. 补全自定义上传方法的状态逻辑 #

先把filesUpload方法的成功、失败回调补全，保证首次上传和重传都能正确同步状态：

const filesUpload = async (uploadItem) => {
  const formData = new FormData()
  formData.append('file', uploadItem.file)
  formData.append('type', uploadItem.file.name.split('.').pop())
  formData.append('bucketName', 'knowledge')
  // 初始化上传进度
  uploadItem.onProgress({ percent: 0 })

  try {
    // 替换为实际项目中的上传请求，注意要绑定上传进度回调
    const res = await yourUploadRequest(formData, {
      onUploadProgress: (progressEvent) => {
        const progressPercent = parseInt(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2))
        uploadItem.onProgress({ percent: progressPercent })
      }
    })
    // 上传成功触发回调，组件自动同步状态
    uploadItem.onSuccess(res.data, uploadItem.file)
  } catch (err) {
    // 上传失败触发回调，标记文件为错误状态
    uploadItem.onError(err)
  }
}

2. 编写独立的重传处理方法 #

不要直接调用filesUpload，先构造符合入参要求的上传对象，同时同步维护自己管理的fileLists状态：

const handleReupload = (errorFile) => {
  // 按uid匹配要重传的文件，避免多文件场景下改错项
  const targetIndex = fileLists.value.findIndex(item => item.uid === errorFile.uid)
  if (targetIndex === -1) return

  // 先重置文件状态为上传中
  fileLists.value[targetIndex].status = 'uploading'
  fileLists.value[targetIndex].percent = 0

  // 构造和customRequest入参结构完全一致的上传对象
  const uploadItem = {
    file: errorFile.originFileObj, // 取原生文件对象，不要直接传列表项
    onProgress: ({ percent }) => {
      fileLists.value[targetIndex].percent = percent
    },
    onSuccess: (res) => {
      fileLists.value[targetIndex].status = 'done'
      fileLists.value[targetIndex].response = res
    },
    onError: (err) => {
      fileLists.value[targetIndex].status = 'error'
      fileLists.value[targetIndex].error = err
    }
  }

  // 执行上传
  filesUpload(uploadItem)
}

3. 绑定重传按钮事件 #

把重试图标原来的点击事件替换成新写的handleReupload方法：

<reload-outlined v-show="file.status === 'error'" @click="handleReupload(file)" />

注意事项 #

• 所有文件状态更新必须操作自己维护的响应式fileLists变量，不要直接修改itemRender返回的file对象引用，否则视图不会同步更新
• 上传用的原生文件对象存在列表项的originFileObj字段中，不要直接把列表元对象作为文件传入FormData，会导致后端无法识别文件内容
• 多文件上传场景下，重传逻辑是按文件uid单独更新对应项状态，不会影响其他文件的上传流程

内容的提问来源于stack exchange，提问作者Larry