今天小编给大家分享一下vue+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);
}在使用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
@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";
}
}以上就是“vue+element-ui+axios多文件上传怎么实现并显示整体进度”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
