element上传组件 before-upload返回false自动调用before-remove on-remove钩子问题解决方法

在利用element-ui开发文件上传时遇到这个问题。

下面是 before-upload 上传文件前的钩子，在遇到大于10M的文件时，我们返回false

    //图片上传前钩子
    beforeUpload(file) {
      this.loading = true;
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        this.loading = false;
        this.$message.error("单个附件大小不能超过 10MB!");
      }
      
      return isLt2M;
      // return false;
    }

但是这时会出现自动调用before-remove on-remove钩子

其实此时我们根本没有上传文件，所以也不会需要删除操作，然后我的代码就报错了。

解决办法如下：

    //删除图片
    beforeRemove(file, fileList) {
      let a = true;
      if (file && file.status==="success") {
          a = this.$confirm(`确定移除 ${ file.name }？`);
      }
      return a;
    },
    //删除图片
    handleRemove(file, fileList) {
      if (file && file.status==="success") {
        this.$axios.delete("accessory/one/" + file.response.id).then(resp => {
          if (resp.status == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
          }
        });
      }
    },

把不需要执行的代码放入判断内。

if (file && file.status==="success") {
         
}

最后

以上就是端庄水壶为你收集整理的element上传组件 before-upload返回false自动调用before-remove on-remove钩子问题解决方法的全部内容，希望文章能够帮你解决element上传组件 before-upload返回false自动调用before-remove on-remove钩子问题解决方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。