Vueはelement-uiと組み合わせてマルチファイルをバックグラウンドにアップロードし、進捗バーを表示する

マルチファイルの前段コードを一度にアップロードするように要求することを実現する:

			
				    
				      
				
    pdf  
			
			//       
			

			    
			
		

			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    `
						);
					}
				}
			})
		

バックエンド単純受信コード:

@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";
	}