ElementUi上传组件 before-upload返回false自动调用before-remove钩子问题排坑指南

一、问题描述

在ElementUI的上传组件中同时使用before-remove和before-upload属性之后出现如下问题：before-remove和before-upload属性都在页面上起作用。

二、问题分析

当before-upload属性返回值为false时会自动触发before-remove属性。

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :before-remove="beforeRemove"
  :before-upload="beforeAvatarUpload">

  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  
</el-upload>

methods: {
	beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
}

三、问题解决

在beforeRemove方法中对文件的状态进行判断，只有当前文件存在并且上传状态为success时才弹框提示。

beforeRemove(file, fileList) {
 if (file && file.status === "success") {
    //移除方法
    return this.$confirm(`确定移除 ${file.name}？`);
  }
},