ant-design-vue(3.x版) 的 upload，如何在上传失败时，可以点击按钮，进行“重新上传操作”

Question

当前实现方法如下：
1：使用自定义上传
2：使用自定义列表项，该部分可以添加重新上传的功能，但是itemRender中的file，无法使用(

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

)。
代码如下：

<template>
  <a-upload
    :multiple="true"
    :max-count="5"
    :file-list="fileLists"
    :rules="[{ required: true, message: '请选择上传文件!' }]"
    style="height: 100px; min-height: 100px; max-height: 350px"
    :before-upload="beforeUpload"
    :custom-request="filesUpload"
    @change="checkFiles"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      选择文件
    </a-button>
    <template #itemRender="{ file, actions }">
      <div style="width: 100%; height: 40px; display: flex; flex-direction: column; align-items: space-between">
        <div style="width: 100%; height: 90%; display: flex; justify-content: space-between; align-items: center">
          <div :style="file.status === 'error' ? 'color: red' : ''">
            <span
              style="
                display: inline-block;
                width: 300px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <paper-clip-outlined style="padding-right: 4px" /> {{ file.name }}</span
            >
          </div>
          <div style="width: 47px; height: 100%; display: flex; align-items: center; justify-content: flex-end">
            <a-space size="large">
              <reload-outlined v-show="file.status === 'error'" @click="filesUpload(file)" />
              <delete-outlined @click="actions.remove" />
            </a-space>
          </div>
        </div>
        <div style="width: 100%">
          <a-progress :stroke-width="2" :percent="file.percent" :show-info="false" />
        </div>
      </div>
    </template>
  </a-upload>
</template>

<script setup>
const fileLists = ref([])
const is200M = 209715200

const beforeUpload = (file, fileList) => {
  console.log('beforeUpload: ', fileList)
  return new Promise((resolve, reject) => {
    if (file.size <= is200M) {
      resolve()
    } else {
      file.status = 'removed'
      fileList.splice(fileList.indexOf(file), 1)
      reject()
    }
  })
}

const checkFiles = ({ file, fileList }) => {
  console.log('checkFiles fileList: ', fileList)
  let tmpFileList = fileList.filter((item) => item.status !== 'removed')
  fileLists.value = tmpFileList
  return tmpFileList
}

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 })
  }

  try {
    const iData = await 调接口(formData, onUploadProgress)
    if (iData.url) {
      file.response = iData
      file.status = 'done'
      file.onSuccess(iData, file)
    } else {
      file.status = 'error'
      file.onError()
    }
  } catch (err) {
    console.log(`上传异常: ${err}`)
    file.status = 'error'
    file.onError()
  }
}
</script>

Answer 1

你已经实现了手动上传 filesUpload， 那么就只需要在调用 filesUpload 就可以了。

你目前的 file 是内部变量，你需要把它存在全局，这样方便你在二次调用的时候可以重新传递进去。

如果还是不行的话，你可以搞成 jsrun 方便我们在线调试

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。