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>


目录
打赏
0
0
0
0
81
分享
相关文章
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3860 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
8月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
1632 0
|
9月前
|
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
200 0
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
460 0
|
10月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
388 0
layui上传组件连续上传同一个文件upload组件无反应
layui上传组件连续上传同一个文件upload组件无反应
415 0
文件上传限制以及element 和 element accept上传使用
前言 大家好,今天和大家分享一下上传文件如何实现上传限制,在制作项目时会遇见需要上传文件的功能,比如上传图片,上传音频,上传视频等等。但是点击上传文件打开文件夹时,文件夹内有好多格式的图片或音频,这个时候为了方便就可以进行文件格式的限制,只显示要上传的文件类型,下面我们来看看如何实现这个功能。