在利用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") {
         
}

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐