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

75 阅读 0 评论 50 点赞

我是靠谱客的博主高挑发卡，最近开发中收集的这篇文章主要介绍element-ui 的upload组件，before-upload验证不通过后触发了on-remove方法的解决办法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、图示

rt，类似于这样的上传

2、HTML

<h3>套图</h3>
 <el-upload :before-upload="beforeAvatarUpload" style="margin-left:75px;" :file-list="fileList" :headers="headers" :action="uploadUrl" :on-success="groupSuccess" list-type="picture-card" :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
 </el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

3、JS

//上传前执行代码
beforeAvatarUpload(file) {
            var isJPG = false;
            switch (file.type) {
                case "image/png":
                    isJPG = true;
                    break;
                case "image/jpeg":
                    isJPG = true;
                    break;
                default:
                    isJPG = false;
                    break;
            }
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isJPG) {
                this.$message.error("上传图片只能是 JPG/PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 3MB!");
            }
            return isJPG && isLt2M;
        },


//删除上传
handleRemove(file) {
            const isType = file.type === 'image/png' || file.name.split('.')[1] === 'image/jpeg';
            if (isType) {
                let url;
            let id;
            if (file.response) {
                url =
                    this.api.book.delete.url +
                    file.response.data.id +
                    "/" +
                    "0";
                id = file.response.data.id;
            } else {
                url =
                    this.api.book.delete.url + file.id + "/" + this.ruleForm.id;
                id = file.id;
            }
            this.axios.post(url).then(res => {
                this.$message({
                    message: "删除成功",
                    type: "success"
                });
                //把相应的id也删除
                let otherImgs = this.ruleForm.otherImgs;
                let arr = [];
                for (let i = 0; i < otherImgs.length; i++) {
                    if (otherImgs[i] != id) {
                        arr.push(otherImgs[i]);
                    }
                }
                this.ruleForm.otherImgs = arr;
            });
            }
            
        },

现在的问题在于，当上传的时候判断上传文件的类型不通过的时候，会触发handleRemove方法，解决办法就是，在删除的时候判断下，该文件类型是不是规定的上传的文件，如果是的话才可以删除，这样的话，如果上传的文件不是规定的文件类型，那么上传不成功，但是因为上传的文件不是规定的文件类型，那么也就不会执行handleRemove方法。如图中const isType = file.type === 'image/png' || file.name.split('.')[1] === 'image/jpeg'; if、、、这段代码。