今天小编给大家分享一下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多文件上传怎么实现并显示整体进度”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
