element-plus:el-upload上传文件只能一次,第二次失效

简介: element-plus:el-upload上传文件只能一次,第二次失效

文档

问题描述

当指定了参数:limit=1,就无法进行第二次上传

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

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

<template>
  <el-upload
    ref="upload"
    :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 upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const submitUpload = () => {
  upload.value!.submit()
}
</script>


相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
3772 0
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
1615 0
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
2371 0
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
|
6月前
|
Linux 内存技术
使用npm install -g pnpm的时候报错
使用npm install -g pnpm的时候报错
1150 139
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10651 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
数据采集 前端开发 JavaScript
PDF预览:利用vue3-pdf-app实现前端PDF在线展示
通过本文的介绍,我们详细了解了如何在Vue3项目中使用vue3-pdf-app实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
5069 0
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
3589 0
el-input限制输入整数等分析

热门文章

最新文章