el-upload图片上传，before-upload中的方法返回false时，会触发on-remove绑定的事件

最新推荐文章于 2025-06-25 14:15:31 发布

转载最新推荐文章于 2025-06-25 14:15:31 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/mmzuo-798/p/15745987.html

文章标签：

#vue.js #前端 #elementui

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在使用Element UI的el-upload组件时遇到的一个问题：当before-upload回调返回false阻止图片上传时，意外触发了on-remove事件。作者通过观察file对象的status属性，发现在before-upload中被拦截的文件status为'ready'，而成功上传后删除的文件status为'success'。因此，可以通过判断file.status来区分这两种情况，避免在不需要的时候重置状态。此问题对于理解和优化前端表单编辑中的图片上传逻辑具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-upload图片上传，before-upload中的方法返回false时，会触发on-remove绑定的事件

这篇文章主要向大家介绍笔记：el-upload中，before-upload中的方法返回false时，会触发on-remove绑定的事件,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

场景
表单编辑时，要求删除上传的图片后重置某些状态，天然在on-remove中的事件写。然而，当修改上传的图片，且图片不合规时，before-uoload中天然的返回了false，还触发了on-remove事件，可是界面上的图片是在的，不须要你重置状态！！！spa

个人办法
通过对on-remove对应参数的打印，发现回调中的file参数有个status，若是是在before-upload中就被过滤了，就是ready，若是已经上传成功了去点击删除，status是success，就他了。

onRemove(file,fileList){
    if(file.status == 'success'){
        //删除后改变某些状态的代码
    }
    if(file.status == 'ready'){
        //这里应该就是before-upload中返回false时的状况了，还有没有别的状况，未知
    }        
}