【vue】文件批量上传报错问题解决Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)

element ui上传组件,开启多图上传时报错,列表显示一个成功,实际图片都已经上传成功。
报错如下:
Uncaught TypeError: Cannot set properties of null (setting 'status')

<el-upload
            ref="upload"
            :limit="5"
            accept=".pdf"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess" 
            :auto-upload="false"
            :data="upload"
            multiple
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处,或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“pdf”格式文件!</div>
          </el-upload>

网上有解决方案
1,:file-list="imageList"指定文件列表为imageList解决方案,尝试过不行
2,有在提交下面增加延时和清空方法,问题来了,你怎么知道5s就执行完成了,时间卡的这么死,所以不行
setTimeout(() => {
this.$refs.upload.clearFiles();
}, 5000);

3,睁开你的卡姿兰大眼睛,解决办法来了
分析原因:多文件上传,文件是一次次调用上传的,所以on-success的成功方法是多次调用,清空早了就会导致问题,所以我们要等文件都上传成功了再清空吧

定义一个fileCount:0
在上传成功方法里

handleFileSuccess(response, file, fileList) {
      if(response.code==200){ //你项目的上传成功code,根据具体项目来哦
        this.fileCount++
      }
    if(this.fileCount == fileList.length){
         //这边可以干其它事情
        //下面三句是重点,关闭弹框,清空项目,个数置0
         this.upload.open = false;
         this.$refs.upload.clearFiles();
         this.fileCount = 0;
      }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容