ant-design-vue（3.x版）的上传，上传失败时如何点击按钮进行“重新上传操作”

Question

The current implementation is as follows: 1: Use custom upload 2: Using a custom list item, this part can add the function of re-uploading, but the file in itemRender cannot be used

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

Code:

<template>
  <a-upload
    :multiple="true"
    :max-count="5"
    :file-list="fileLists"
    :rules="[{ required: true, message: 'Please select upload file!' }]"
    style="height: 100px; min-height: 100px; max-height: 350px"
    :before-upload="beforeUpload"
    :custom-request="filesUpload"
    @change="checkFiles"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      select file
    </a-button>
    ...
  </a-upload>
</template>

const checkFiles = ({ file, fileList }) => {
  ...
}

const filesUpload = async (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  formData.append('type', file.file.name.split('.').pop())
  formData.append('bucketName', 'knowledge')
  file.onProgress()

  const onUploadProgress = (progressEvent) => {
    let progressPercent = parseInt(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2))
    file.onProgress({ percent: progressPercent })
  }
}
</script>

Answer 1

You have already implemented manual upload filesUpload , then you only need to call filesUpload .

Your current file is an internal variable, you need to store it globally, so that you can re-pass it in the second call.

If it still doesn't work, you can make jsrun for us to debug online