Vue 结合element -ui实现多文件上传到后台并显示进度条

实现请求一次上传多文件
前段代码：

<div id="app">
			<el-upload class="upload-demo" 
			ref="upload" 
			action="#" //必选参数，上传的地址 
			:on-change="onChange" //上传文件改变时触发钩子 --控制文件组
			:on-remove="handleRemove" //文件列表删除时触发钩子 --控制文件组
			multiple //是否支持多选文件
			:on-exceed="handleExceed" //文件超出个数限制时的钩子
			accept=".pdf" //上传文件格式
			:limit="5" //上传限制
			:file-list="fileList" //上传的文件列表
			:auto-upload="false"//是否在选取文件后立即进行上传
			show-file-list>
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				<div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
			</el-upload>
			//上传显示进度条
			<div v-show="progressFlag" class="head-img">
			    <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
			</div>
		</div>

<script>
			new Vue({
				el: "#app",
				data() {
					return {
						fileList: [],//储存多文件
						progressFlag: false,//进度条初始值隐藏
						progressPercent: 0//进度条初始值
					};
				},
				methods: {
					//上传函数
					submitUpload(file) {
						//重新命名 方便setTimeout函数 --因为setTimeout函数在vue内部中无效 
						var that = this;
						that.$refs.upload.submit();
						//判断上传文件数量
						if (this.fileList.length == 0) {
							that.$message({
								message: '请选择导入的文件',
								type: 'warning',
								duration:'2000'--显示时间
							});
						}else{
						
						//创建FormData();主要用于发送表单数据
						let paramFormData = new FormData();
						//遍历 fileList 
						that.fileList.forEach(file => {
							paramFormData.append("files", file.raw); 
							paramFormData.append("fileNames", file.name);
						});
						//修改progressFlag值
						that.progressFlag = true; 
						//控制台打印文件信息
						console.log(param.getAll("files"));
						//axios 发出请求
						axios({
							url: "你上传的URL",
							method: 'post',
							data: paramFormData,
							headers: {'Content-Type': 'multipart/form-data'},
							onUploadProgress: progressEvent => {
								// progressEvent.loaded:已上传文件大小
								// progressEvent.total:被上传文件的总大小
								//进度条
								that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
								}
							}).then(res => {
								if(res.data == "success" && that.progressPercent === 100){
									setTimeout(function() {
										that.$message({
								            message: '导入成功！',
								            type: 'success',
								            duration:'2000'
								        });
										that.progressFlag = false;
										that.progressPercent = 0
										that.$refs.upload.clearFiles();
									}, 1000);
								}
							}).catch(error => {
								that.progressFlag = false;
								that.progressPercent = 0
								that.$refs.upload.clearFiles();
								that.$message({
						            message: '导入失败！',
						            type: 'error',
						            duration:'2000'
						        });
							})
						}
					},
					//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
					onChange(file, fileList) {
						this.fileList = fileList;
					},
					handleRemove(file, fileList) {
						this.fileList = fileList;
					},
					handleExceed(files, fileList) {
						this.$message.warning(
							`当前限制选择 5 个文件`
						);
					}
				}
			})
		</script>

后端简单接收代码：

@ResponseBody
	@RequestMapping("接收URl")    //用数组去接收
	public String uploadPfd(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) {
		//do something.................
		//do something.................
		//我这里只是简单打印出文件名字
		for (int i = 0; i < files.length; i++) {
			System.out.println(files[i].getOriginalFilename());
		}
		return "success";
	}