ElementUI中使用el-upload上传文件校验不通过时触发on-remove事件

gulugulumaogepao

已于 2022-06-30 21:30:25 修改

阅读量1.7k

点赞数

分类专栏： Vue+ElementUI 文章标签： vue.js javascript 前端 elementui

于 2022-06-30 21:25:09 首次发布

本文链接：https://blog.csdn.net/C_B_Y/article/details/125548112

版权

本文介绍了在ElementUI的el-upload组件中，当文件上传校验失败（如格式、大小、重名）时，如何避免错误地触发on-remove事件删除已上传文件。问题关键在于未在移除文件前检查文件的状态。解决方案是添加状态判断，确保只有在文件上传成功（status === 'success'）时才执行移除操作。

摘要由CSDN通过智能技术生成

项目场景：

使用ElementUI中el-upload上传文件，上传文件校验不通过时触发on-remove事件

问题描述

ElementUI中使用el-upload上传文件时，文件的格式、大小、重名等校验不通过时会触发on-remove事件处理函数，例如重名校验不通过时触发了on-remove事件导致之前上传的文件移除。

代码如下：

// 上传文件前
handleBeforeUpload(file) {
   
  let arr = file.name.split('.');
  if (!['pdf', 'doc', 'docx', 'ppt', 'pptx', 'jpg', 'jpeg', 'png'].includes

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

gulugulumaogepao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

终止el-upload的文件上传

m0_45858045的博客

06-03

748

<div class="answerBox"> <el-input class="answer" v-model="dataAnswer.answer" style="width: 100%;" :rows="2" type="textarea" placeholder="请在此输入您的答案" resize="none" /> <div class="input-helper">您已输入{{ dataAnswer.answer.length }}字</div&

关于el-upload执行完before-upload事件之后会触发on-remove事件的解决方式

weixin_41897680的博客

10-18

3104

关于el-upload执行完before-upload事件之后会触发on-remove事件的解决方式

参与评论您还未登录，请先登录后发表或查看评论

element-ui 的upload组件，before-upload验证不通过后触发了on-remove方法的内容（已解决）

shiqi236的博客

10-15

2381

element-ui 的upload组件，before-upload验证不通过后触发了on-remove方法的内容（已解决） vue ： <el-upload :headers="myHeaders" class="upload-demo" :action="homeVideoUploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"

element-ui el-upload组件 on-remove事件传自定义参数

qq_42312329的博客

08-29

1612

2.methods方法里面。

element的upload组件在before-upload之后触发before-remove以及后面on-remove方法

努力努力再努力的博客

06-14

1739

今天项目实践时，突然发现 element 的 el-upload组件在before-upload 之后 return false 之后竟然会自动触发 before/on - remove 方法。查阅了资料，发现解决方法很简单。

element-ui 中如何在el-upload的移除文件列表事件 on-remove 中先异步请求，如果失败则不移除

热门推荐

一片叶子的博客

04-12

1万+

1、问题描述：今天想弄一个文件上传功能，在上传失败的时候，在文件列表中不移除文件，可是每次点击删除之后都把文件列表清除掉了去网上搜索下相关问题解决方案，结果搜到下面这个可以看到阅读17k，竟然下面都没有一个人回答，没办法只能自己去寻求解决方法了。 2、解决问题 2.1定义一个文件列表 fileList，然后绑定在组件 el-upload上，如下截图 2.2 两个关键方法on-remove、before-remove 两个方法Element官方描述如截图，通过官方描述可以知道

element上传组件调用before-upload失败自动调用on-remove事件

Sapling

08-19

4513

vue+element 上传图片的时候，如果图片大小超过了限制before-upload失败，直接调用了on-remove 可以通过使用检测file返回的状态进行判断 if (file && file.status==="success") { // 成功时候的方法 } ...

element-ui upload组件 on-remove事件传自定义参数

tyjlearning的博客

04-20

1万+

1.html <el-form-item label="附件上传" prop="" >  <el-upload class="" action="#" list-type="picture-card" :on-previ...

el-upload批量添加文件转换为base64格式上传，以及on-change钩子存在的坑和解决方法

Hay-Zero的博客

09-10

888

<template> <el-upload class="upload-demo" action=" " //必选参数，上传的地址 :multiple="true" //是否支持多选文件 :limit="5" //最大允许上传个数 accept="image/png, image/jpeg" //接受上传的文件类型 :on-change="(file,fileList) =&gt.

el-upload手动上传多张图片

v_loading的博客

04-21

2450

#使用el-upload 配置:http-request=“modeUpload” <el-form-item label="设备图片" prop="file"> <el-upload ref="upload" action="" list-type="picture-card"

Vue项目使用element中upload组件的http-request自定义上传文件问题及限制文件类型

weixin_44237840的博客

05-23

4753

在修改项目的时候，发现之前项目是对文件类型限制jpeg、jpg、png、docx、mp4、ppt、pdf，结果没有限制住类型，上传webp图片时也可以进行上传。然后在修改的过程中发现，因为我添加了before-remove移除之前钩子函数，然后添加上传之前对文件类型校验时候，若符合就上传成功，否则移除弹框弹出进行删除，目前我去掉了二次确认删除弹框，参考代码： <el-upload class="upload-file" action :before-upload="beforeUpl

Element Upload上传校验失败后强制删除上传列表中校验失败的那一项

最新发布

m0_63788547的博客

09-28

821

Element Upload上传校验失败后强制删除上传列表中校验失败的那一项

element-ui的upload组件上传文件失败后，仍显示在列表上去除

hllyzms的博客

05-11

8020

el-upload 上传文件没有成功，但是文件仍显示在列表上记得ref="uploadFile" 要写上下面要用到 <el-upload ref="uploadFile" class="upload-demo" action="http://127.0.0.1:8000/p/v1/file/" multiple :http-request="uploadFile" :file-list="temp.fileList"> <el-butto 上传文件 uploadFi...

Element UI upload 上传文件判断格式，删除同时删除刚上传服务器的文件

wuzushun的博客

02-01

1094

功能简单，从官方文档出发即可,废话不多说，上代码一看便知！

vue问题三：element ui的upload组件上传图片成功和移除事件

diji8584的博客

10-23

1万+

element ui的upload组件上传图片成功和移除事件：登录后获取到后台传的token存到中： sessionStorage.setItem("token",data.obj.token); 用getItem取出： sessionStorage.getItem('token') <div class="addImg"> ...

el-upload before-upload false时会触发on-remove

蚂蚁的博客

06-07

374

el-upload

el-upload用代码手动删除附件

weixin_44134899的博客

08-13

4061

this.$refs.upload.abort(file) // upload: el-upload的ref值；file:File类型，file文件本身 fileList.splice(fileList.indexOf(file), 1) // fileList: 文件列表，钩子函数中的fileList this.onRemove(file, fileList) // 调用钩子函数on-remov...

element upload手动上传并灵活删除文件列表项

weixin_44738844的博客

07-11

6338

点击提交才能上传文件列表，文件列表右侧关闭按钮删除单个文件项目。使用remove和change控制文件列表的增加和删除。手动上传，要关闭自动上传的功能。

el-upload上传文件校验

09-10

el-upload 是 Element UI 中的文件上传组件，它可以进行文件的校验。要对上传的文件进行校验，你可以使用 Element UI 提供的属性和事件。首先，在 el-upload 组件上设置 accept 属性来指定允许上传的文件类型。例如，如果你只想允许上传图片文件，可以设置 accept="image/*"。接下来，你可以使用 before-upload 属性来自定义文件校验的逻辑。before-upload 属性接收一个函数，该函数会在每个文件上传前被调用。你可以在该函数中进行校验，并返回一个 Boolean 值来指示是否继续上传该文件。以下是一个示例代码，展示了如何对文件进行校验： ```html <template> <el-upload action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" accept="image/*" > <el-button slot="trigger">点击上传</el-button> <div slot="tip">只能上传图片文件</div> </el-upload> </template> <script> export default { methods: { beforeUpload(file) { // 自定义校验逻辑 const isValidType = file.type === 'image/jpeg' || file.type === 'image/png'; const isValidSize = file.size / 1024 / 1024 < 2; // 文件大小限制为2MB if (!isValidType) { this.$message.error('只能上传JPEG和PNG格式的图片'); } if (!isValidSize) { this.$message.error('文件大小不能超过2MB'); } return isValidType && isValidSize; }, handleSuccess(response, file) { // 文件上传成功的处理逻辑 this.$message.success('文件上传成功'); }, handleError(error, file) { // 文件上传失败的处理逻辑 console.error(error); this.$message.error('文件上传失败'); }, }, }; </script> ``` 在上述示例中，beforeUpload 方法对文件进行了类型和大小的校验，如果校验不通过，则阻止文件上传并给出相应的错误提示。handleSuccess 和 handleError 方法分别用于处理文件上传成功和失败后的逻辑。注意，上述示例中的消息提示部分使用的是 Element UI 中的 Message 组件，你可以根据自己的需求来替换为其他方式的提示。希望以上信息能够对你有所帮助！如果你还有其他问题，请随时提问。