一、问题描述

最近在vue项目上，使用el-upload组件实现多文件上传功能时出现了如下的报错内容。

Uncaught TypeError: Cannot set properties of undefined (setting ‘status’)

二、原因描述

经过反复断点、注释查找，最终发现问题在于：

1. vue项目的多文件上传为重复调用同一接口，而非单次调用，由于需要控制单次批量上传的文件个数，需要在全部文件成功上传后对上传文件列表进行清空。上传成功后fileList被清空会导致该问题产生，无论是使用this.$refs.upload.clearFiles()；或file-list="[]";，如果不在最后一个文件上传结束后再清空都会提示该错误

2. 上传成功后向父组件传值this.$emit('transmission', file.response.data.uid)；

三、问题解决

1.第一次解决：

但是由于多文件上传做了限制（limit），即使分多次上传，只要fileList的长度大于limit的限制，即会被捕获，最后通过控制在最后一个文件时清空fileList得以解决。

// 在上传的最后一个文件处调用，否则报错
if (file == fileList[fileList.length - 1]) {
	// 清空上传文件列表，否则影响上传文件数限制判断
	this.$refs.upload.clearFiles();
}

2.第二次解决：

若多文件上传时中间存在大文件，则最后一个上传完成的文件应为该大文件，而不是原文件上传列表的最后一个文件，需要重新进行判断。

// 在全部文件完成上传后调用，清空上传列表
let isAllSuccess = true;
for (let item of fileList) {
	if (item.status != "success") {
		isAllSuccess = false;
		break;
	}
}
if (isAllSuccess) {
	// 清空上传文件列表，否则影响上传文件数限制判断
	this.$refs.upload.clearFiles();
}