Element UI中el-upload文件上传失败会出发onRemove踩坑记录(已解决)

我穿棉裤了2026-03-27 18:11

Element UI文件上传校验的深度实践指南

引言

在Vue.js生态中，Element UI作为一套成熟的组件库，被广泛应用于中后台管理系统开发。其中el-upload被应用较为广泛，此文根据before-upload和on-remove两个方法踩坑记录做一篇踩坑指南

这个问题看似简单，实则涉及Element UI upload上传组件的核心原理。本文将带您深入理解el-upload组件核心逻辑，从校验原理剖析到多种实战解决方案，帮助您彻底掌握文件上传校验的艺术。

1.问题根源刨析：为什么 before-upload失败会触发？？？

要解决before-upload失败会触发on-remove方案首先要搞懂upload上传的逻辑

beforeUpload 检验不通过返回 false，但 handleChange 仍然会被触发，导致执行了 removeFile 逻辑，所以你会看到两条提示。

2.解决思路

在on-remove 添加检验限制，只在检验通过之后才触发删除和提示信息

复制代码

  handleRemove() {
       const suffix =this.fileName.substring(this.fileName.lastIndexOf(".")).toLowerCase();     
            if ([".pptx"].includes(suffix)) {
                this.uploadFile = null;
                this.fileName = "";
                this.fileList = [];
                this.isUploading = false;
                this.uploadProgress = 0;
                ElMessage.info("文件已成功删除！");
            }
        },

这样改完后，格式不对时只会显示 beforeUpload 里的"仅支持 .pptx 格式的文件！"提示，不会再触发 hannleRemove 的删除提示。

3.结束语

本文是自己做项目踩坑而受到的灵感启发而写，制作不易，点个赞再走吧！！！