需求

• 使用elementUI的上传组件，并以FormData格式上传多文件
• 显示上传进度

FormData

使用element的上传组件做多文件上传时，你会发现其实element是对文件列表做了一个遍历，然后挨个上传，这不符合需求，我想要多个文件只发一次请求。所以想到可以用FormData解决

我的实现思路是把组件的 http-request 属性设为自己的方法 addFileToFormData ，并让组件自动上传 :auto-upload="true" ，然后我们在 addFileToFormData 里面写上添加到FormData的逻辑，这样每当我们添加文件的时候，就在自动添加到FormData里。

• el-upload组件：

<el-upload
	ref="upload"
	multiple
	action="/"
	:accept=".."
	:limit=".."
	:on-exceed=".."
	:show-file-list="false"
	:auto-upload="true"
	:http-request='addFileToFormData'
>
	<el-button slot="trigger" type="success" @click="upload">上传</el-button>
</el-upload>

• data:

data () {
	return {
		fileFormData: null, // 将要上传的formdata数据
		percentage: 0, // 存放上传百分比
	}
}

• 先new一个FormData

created () {
	this.fileFormData = new FormData(); 
}

• 然后我们看下 addFileToFormData 函数：

addFileToFormData(file) {
	/*
	 * 每选一个文件都会执行一次该函数
	 * 也就把每个文件都添加到 this.fileFormData 里面
	 * 在添加之前也可以加上自己的一些判断逻辑
	 * 当然也可以直接利用 el-upload 组件自带的限制功能
	*/
	this.fileFormData.append('file[]', file.file);
}

你可以去打印下看看我们添加完的formData是咋样的

 console.log(this.fileFormData.getAll('file[]'));

第一步基本完成了，接下来是上传

上传并显示进度

要知道上传进度是 XMLHttpRequest 的属性，不是属于上传组件的！这里上传使用 axios 发送请求

• 上传函数 upload：

upload() {

	const formData = this.fileFormData;
	const fn = this.uploadProgress; // 我们自己处理上传进度的函数
	
	axios({
		method: 'post',
	  	url: '/yourURL',
	  	headers: {
	      'Content-Type': 'multipart/form-data'
	    },
	  	data: formData,
	  	onUploadProgress: fn, // `onUploadProgress` 允许为上传处理进度事件
	});
}

• uploadProgress 函数：

uploadProgress(progressEvent){
	/*
	 * progressEvent.loaded :已上传量
	 * progressEvent.total :上传的总大小
	*/
    const p = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
    this.percentage = p;
},

这样就可以用 {{ percentage }} 在页面上实时显示上传进度了，elementUI里面有个上传进度组件，可以配合着使用