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;
}
}