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
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3734 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
JavaScript 前端开发
el-upload上传文件
el-upload上传文件
1078 0
|
4月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
1260 0
|
6月前
|
JavaScript
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的示例代码:
396 0
|
6月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
307 0
element中form表单resetFields()方法重置表单无效
element中form表单resetFields()方法重置表单无效
175 0
文件上传限制以及element 和 element accept上传使用
前言 大家好,今天和大家分享一下上传文件如何实现上传限制,在制作项目时会遇见需要上传文件的功能,比如上传图片,上传音频,上传视频等等。但是点击上传文件打开文件夹时,文件夹内有好多格式的图片或音频,这个时候为了方便就可以进行文件格式的限制,只显示要上传的文件类型,下面我们来看看如何实现这个功能。