For the upload of ant-design-vue (version 3.x), how to click the button to perform "re-upload operation" when the upload fails

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