vue+element-ui+axios多文件上传怎么实现并显示整体进度

今天小编给大家分享一下Vue+element-ui+axiOS多文件上传怎么实现并显示整体进度的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

element-ui+axios多文件上传并显示进度

element-ui自带的多文件上传是做成了多文件多次上传,公司有需求需要选取多个文件一次上传全部.

代码部分

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

解决element ui多文件上传的问题

业务场景

在使用vue+elementui 实现文件上传的时候，我发现官网给的组件每次都会自动上传，而且一次上传一个文件。但是我实际的业务是，一次上传多个文件。

解决办法

前端代码：

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

以上就是“vue+element-ui+axios多文件上传怎么实现并显示整体进度”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。