饿了么这个一次性上传多文件的功能有点坑呀,
首先第一点:饿了么的上传前回调一起触发的,触发完毕之后才依次触发上传成功回调,当选了多个文件的时候也是如此;
第二点:对于filelist,如果你每次在上传成功回调里将文件信息push到filelist进去,这样单文件上传是没问题的,但是批量上传时会报错的,报错节点在饿了么内部源码:
handleProgress: function handleProgress(ev, rawFile) {
var file = this.getFile(rawFile);
this.onProgress(ev, file, this.uploadFiles);
file.status = 'uploading';
file.percentage = ev.percent || 0;
},
代码第二次走到这里时,file.status报错,因为file为undefined,因为在getfile方法里,获取到的uploadFiles变量只存了第一个文件的信息,理论上应该是多条的的。
所以多批量上传时,可以变量专门用来计数(number),在上传文件成功时将文件信息存到一个临时变量(uploadList)里,当临时变量长度跟计数相等时,再将临时变量的文件信息一次性赋值给filelist变量。
具体做法如下:
1.在上传回调里对计数变量number进行++
2.代码如下:
handleUploadSuccess(res) { // 上传成功回调
console.log(res,'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.$modal.closeLoading();
}
},