element-ui中el-upload报错 Uncaught TypeError: Cannot set property ‘status‘ of null

113 阅读 0 评论 75 点赞

我是靠谱客的博主老迟到路灯，这篇文章主要介绍element-ui中el-upload报错 Uncaught TypeError: Cannot set property ‘status‘ of null，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-upload
      class="avatar-uploader"
      :class="!isEdit ? 'read-file' : 'editFile'"
      :action="'api/file/upload?_allow_anonymous=true'"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      multiple
      :limit="limitNumber"
      :on-exceed="handleExceed"
      :before-upload="beforeAvatarUpload"
      :file-list="fileList"
    >
</el-upload>

在使用el-upload中，上传多个文件报错 Uncaught TypeError: Cannot set property 'status' of null

情况多发生为手动修改了 fileList的值。

解决方案：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 beforeAvatarUpload(file) {
      // 判断文件类型
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJPG) {
        this.$message.error("仅支持图片！上传其他附件，请通过PC端操作!");
        return isJPG;
      }
      
      
      // 手动修改fileList的值，需要在befoupload中添加
      if (!this.fileList) {
        this.fileList = [];
      }
      this.fileList.push(file);
      this.defaultAttachment.attachFile = this.fileList;
    },