关于vue.js: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";
    }