vue+element-ui+axios多文件上传的实现并显示整体进度
作者：hhcode
这篇文章主要介绍了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 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);
}解决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
@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";
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。