vue+element-ui+axios多文件上传的实现并显示整体进度_vue.js

<template>    <d2-container>      <el-form ref="form" :model="formData" label-width="120px">        <el-row>          <el-col :span="10">            <el-form-item label="图片"  prop="mediaFileUrl">              <el-upload style="width: 100%;"                class="upload-demo"                ref="uploadMul"                multiple                action                drag                :limit="maxUploadSize"                :on-exceed="uploadLimit"                :http-request="uploadFile"                :file-list="fileList"                :auto-upload="false"                :on-remove="handleRemove"                :before-upload="beforeUpload"                :on-change="uploadChange"              >                <i class="el-icon-upload"></i>                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>                <div class="el-upload__tip" slot="tip">支持上传jpg/png/gif文件，且不超过100M</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>              <el-button size="mini" type="success" @click="submitUpload">上传到服务器</el-button>              <el-button v-if="this.fileList.length > 0" size="mini" type="warning" @click="clearFiles">清空</el-button>            </el-form-item>          </el-col>          <el-col :offset="4"></el-col>        </el-row>      </el-form>    </d2-container>  </template>

<script>  import axios from 'axios'  export default {    data () {      return {        maxUploadSize: 10,        progressFlag: false,        progressPercent: 10,        innerVisible: false,        fileList: [],        isViewDisabled: false,        formData: {},        param: {} // 上传文件主要参数      }    },    methods: {      submitUpload () {        if (this.fileList.length < 1) {          this.$message.warning('请选择文件!')          return false        }        this.$refs.uploadMul.submit()        if (this.param instanceof FormData) {          // 附加参数          this.param.append('expirationsec', 0)          this.param.append('fileproperty', 'publicfiles')          // const config = {          //   headers: { 'content-type': 'multipart/form-data' }          // }          // axios.post('/api/oss/ossUploadObject', this.param, config).then(res => {          //   if (res.status === 200 && res.data.status === 200) {          //     this.$message.success('上传成功!')          //     let result = res.data.body.data          //     console.log(result)          //   }          //   this.$refs.uploadMul.clearFiles()          //   this.param = {}          // })          let that = this          that.progressFlag = true          axios({            url: '/api/oss/ossUploadObject',            method: 'post',            data: that.param,            headers: { 'Content-Type': 'multipart/form-data' },            onUploadProgress: progressEvent => {              // progressEvent.loaded:已上传文件大小              // progressEvent.total:被上传文件的总大小              // 进度条              that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0) | 0            }          }).then(res => {            this.param = {}            this.fileList = []            console.log(res)            if (res.data.status === 200 && that.progressPercent === 100) {              setTimeout(function () {                that.$message({                  message: '上传成功！',                  type: 'success',                  duration: '2000'                })                that.progressFlag = false                that.progressPercent = 0                that.$refs.uploadMul.clearFiles()              }, 1000)              let result = res.data.body.data              console.log(result)            } else {              setTimeout(function () {                that.$message({                  message: res.data.msg,                  type: 'error',                  duration: '2000'                })                that.progressFlag = false                that.progressPercent = 0                that.$refs.uploadMul.clearFiles()              }, 1000)            }          }).catch(() => {            that.progressFlag = false            that.progressPercent = 0            that.$refs.uploadMul.clearFiles()            that.$message({              message: '上传失败！',              type: 'error',              duration: '2000'            })          })        } else {          console.log(this.param instanceof FormData)        }      },      handleRemove (file, fileList) {        this.$message.warning(`已移除文件:  ${file.name}!`)        // 每移除一个文件,param重新赋值        this.param = new FormData()        this.fileList = [...fileList]        this.fileList.forEach((file, index) => {          this.param.append(`file`, file.raw) // 把单个文件重命名，存储起来（给后台）        })      },      uploadChange (file, fileList) {        // const videoType = ['image/gif', 'image/png', 'image/jpeg', 'video/mp4', 'video/flv', 'video/avi', 'video/rmvb']        // if (videoType.indexOf(file.raw.type) === -1) {        //   this.$message.error(`不支持此文件格式${file.raw.type}`)        //   this.$refs.uploadMul.clearFiles()        //   return false        // }        this.param = new FormData()        this.fileList = [...fileList]        this.fileList.forEach((file, index) => {          this.param.append(`file`, file.raw) // 把单个文件重命名，存储起来（给后台）        })      },      // 超出上传个数时调用      uploadLimit (files, fileList) {        this.$message.error(`最多允许同时上传${this.maxUploadSize}个文件!`)        // files.forEach((file, index) => {        //   console.log(index)        // })      },      beforeUpload (file) {      },      uploadFile (file) {        // 该方法需存在,防止空action时element-ui报404异常      },      clearFiles () {        this.fileList = []        this.param = {}        this.$refs.uploadMul.clearFiles()      },      // 初始化表单数据      init () {      }    }  }  </script>  <style lang="scss" scoped>  </style>    

@RequestMapping("/oss/ossUploadObject")  public ApiResponse<FileDto> uploadObject(@RequestParam("file") MultipartFile[] file, FileVo fileVo){      //...code      FileDto dto = new FileDto();      dto.setUrl("");      dto.setFileId("");      return ApiResponse.success(FileDto);  }

<template>    <div>  <!--    文件上传组件-->  <!--      :auto-upload="false" 这里设置为不自动上传 ，所以:action="BASE_API+'/upload'“ 失效-->    <el-upload      name="files"      class="upload-demo"      :on-change="OnChange"      :multiple="true"         :action="BASE_API+'/upload'"      :on-preview="handlePreview"      :before-remove="beforeRemove"      :file-list="list"      :auto-upload="false"      list-type="picture">      <i class="el-icon-plus"></i>      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>    </el-upload>    <el-dialog :visible.sync="dialogVisible">      <img width="100%" :src="dialogImageUrl" alt="">    </el-dialog>    <el-button type="" @click="fun">点击查看filelist</el-button>    <el-button type="" @click="onSubmit">提交</el-button>    </div>     </template>

<script>    import upload from "@/api/upload"    import request from "@/utils/request"       export default {      data() {        return {          param: new FormData(),          form:{},          count:0,          list:[],          dialogVisible:false,          dialogImageUrl:'',          BASE_API: process.env.BASE_API, // 接口API地址        };      },      methods: {        handlePreview(file) {          this.dialogImageUrl = file.url;          this.dialogVisible = true;        },        beforeRemove(file, fileList) {          return this.$confirm(`确定移除 ${ file.name }？`);        },        OnChange(file,fileList){             console.log(fileList)          this.list=fileList           },        OnRemove(file,fileList){          this.list=fileList        },        fun(){          console.log('------------------------')          console.log(this.list)        },        onSubmit(){             // this.form={          //   a:1,          //   b:2,          //   c:3          // }          // let file=''          // for(let x in this.form){          //   this.param.append(x,this.form[x])          // }          // for(let i=0;i<this.list.length;i++){          //    const file='file'+this.count          //   this.count++          //   this.param.append(file,this.list[i].raw)          // }          // console.log(this.param)             console.log(this.list[0])             let formData = new FormData();          let file1 = this.list[0]          let file2 = this.list[1]          console.log(file1)          console.log(file2)          // 这里必须是 .raw 不然后端springboot multipart 获取到的文件为 null          // 单个文件的话 后端接口写 Multipart file          // 多个文件的话 后端接口写 Multipart [] files          // 文件名需要对应          formData.append('files', file1.raw);          formData.append('files', file2.raw);          // formData.append('name', 'zhangsan');          // formData.append('files[]', file2);             request.post('/upload',formData,{            headers: {              'Content-Type': 'multipart/form-data'            }}).then(res=>{            console.log(res)          })             // request.post('/testabc?name='+formData.get("name")).then(res=>{          //   console.log(res)          // })             // upload.uploadfile(formData).then(res=>{          //   console.log(res)          // })          // batchTagInfo(this.param)          //   .then(res=>{          //     alert(res)          //   })        }      }    }  </script>     <style scoped>  </style>

package com.yj.wiki.controller;  import org.springframework.web.bind.annotation.CrossOrigin;  import org.springframework.web.bind.annotation.PostMapping;  import org.springframework.web.bind.annotation.RestController;  import org.springframework.web.multipart.MultipartFile;     @RestController  @CrossOrigin  public class UploadFileController {         @PostMapping("/upload")      public String upload(MultipartFile[] files){             for (MultipartFile file : files) {              System.out.println(file.getOriginalFilename());             }             return "ok";      }         @PostMapping("/testabc")      public String upload(String name){             System.out.println(name    );             return "ok";      }  }