Element UI 上传图片组件(支持多传和单传),多图时报错Cannot set property 'status' of null
注意fileLIst是只读的,不能修改。我们这里使用uploadList来保存我们需要改动的数组,否则报错Cannot set property 'status' of null:
上传多图时,第一张图片file对象有值,后面就没了,这边就报错了。
问题分析:每次上传都会促发 handleBeforeUpload和handleUploadSuccess,传几张就会触发几次,经过反复调试,应该是handleUploadSuccess上传回调方法执行多次$emit引起的
解决方案:声明一个number变量用于记录上传图片数量,上传成功回调后通过判断图片数量与number一致时,执行一次$emit。
使用uploadList数组用来临时保存上传的多图数组
增加两个变量
uploadList:[],
number:0,
修改两个方法:
1.handleBeforeUpload
// 上传前loading加载,此方法的执行,始终在 handleUploadSuccess之前的(多图时,全部图片校验过后才会去上传)
handleBeforeUpload(file) {
// 放在末尾
this.number++;
// 上传成功回调
handleUploadSuccess(res) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
if(this.uploadList.length===this.number){
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.loading.close();