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>


相关文章
|
存储 JSON 数据库
vue3中实现文件上传---通过element-plus的upload组件
vue3中实现文件上传---通过element-plus的upload组件
Maximum call stack size exceeded报错的原因及解决办法
Maximum call stack size exceeded报错的原因及解决办法
3611 0
|
JavaScript
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
9022 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
|
关系型数据库 MySQL Java
docker 安装flowable-ui使用mysql
docker 安装flowable-ui使用mysql
980 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9162 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
3326 0
element table配合from实现双击可编辑表格
如何使用Element UI的el-table和el-form组件实现双击可编辑的表格。
296 0
|
JavaScript 前端开发
vue element plus Upload 上传
vue element plus Upload 上传
323 0
|
JavaScript 开发工具 数据安全/隐私保护
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
352 0
|
JavaScript 前端开发 小程序
uni-app subNVue 原生子窗体开发指南
uni-app subNVue 原生子窗体开发指南
627 1