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>
posted @   槑孒  阅读(446)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
历史上的今天:
2022-08-23 ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
2022-08-23 Vue2按需引入elementUI组件
点击右上角即可分享
微信分享提示