el-upload重复上传文件失效(Element-Plus)

当指定了参数limit=1, 再次上传就会无效

以下是 官方文档给出的解决方法示例

通过on-exceed来定义超出限制时的行为

登录后复制

<template>
  <el-upload
    ref="uploadRef"
    :limit="1"
    :on-exceed="handleExceed"
    :auto-upload="false"
  >
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const uploadRef= ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  uploadRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadRef.value!.handleStart(file)
  submitUpload()
}

const submitUpload = () => {
  uploadRef.value!.submit()
}
</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.

原创作者: echohye 转载于: https://blog.51cto.com/echohye/11851359