element-ui多文件上传的实现示例
程序员文章站
2022-03-21 17:07:37
上传方案一：
先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器
上传方案一：
先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器
<div class="upload-music-container">
<el-upload
class="upload-music"
ref="upload"
action="http://up-z2.qiniup.com/"
:data="{token:uploadtoken}"
multiple
accept=".mp3"
:before-upload="uploadbefore"
:on-change="uploadchange"
:on-success="uploadsuccess"
:on-error="uploaderror">
<el-button size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">仅支持上传mp3文件，文件大小不超过500m</div>
</el-upload>
<el-button size="small" type="success" @click="submitupload">上传到服务器</el-button>
</div>
export default {
name: 'uploadmusic',
data() {
return {
headers: {},
uploadtoken: null,
canuploadmore: true,
filelist: null,
}
},
created() {
this.headers = {} //此处需要与server约定具体的header
this.getuploadtoken()
},
methods: {
//获取上传七牛token凭证
getuploadtoken() {
this.$http.get('xxxxxxx', {headers: this.headers}).then(response => {
if (response.data.status == 200) {
let resp = response.data.data
this.uploadtoken = resp.token
} else {
this.$message({
message: '获取凭证失败，请重试',
type: 'error'
})
}
})
},
//获取音频文件时长
getvideoplaytime(file, filelist) {
let self = this
//获取录音时长
try {
let url = url.createobjecturl(file.raw);
//经测试，发现audio也可获取视频的时长
let audioelement = new audio(url);
let duration;
audioelement.addeventlistener("loadedmetadata", function (_event) {
duration = audioelement.duration;
file.duration = duration
self.filelist = filelist
});
} catch (e) {
console.log(e)
}
},
//校验上传文件大小
uploadchange(file, filelist) {
this.filelist = filelist
let totalsize = 0
for (let file of filelist) {
totalsize += file.raw.size
}
if (totalsize > 500 * 1024 * 1024) {
this.canuploadmore = false
this.$message({
message: '上传文件不能不超过500m',
type: 'warn'
})
} else {
this.canuploadmore = true
}
},
uploadbefore(file) {
if (this.canuploadmore) {
return true
}
return false
},
//上传成功
uploadsuccess(response, file, filelist) {
this.getvideoplaytime(file, filelist)
},
//上传失败
uploaderror(err, file, filelist) {
console.log(err)
},
//上传服务器数据格式化
getuploadmusiclist() {
let musiclist = []
for (let file of this.filelist) {
if (file.response && file.response.key) {
musiclist.push({
"play_time": file.duration, //播放时长
"size": file.size/1024, //文件大小 单位 kb
"song_name": file.name, //歌曲名
"voice_url": "xxxx" //上传七牛返回的访问路径
})
}
}
return musiclist
},
//上传至服务器
submitupload() {
let musiclist = this.getuploadmusiclist()
this.$http.post('xxxxxxxxxx', {music_list: musiclist}, {headers: this.headers}).then(response => {
if (response.data.status == 200) {
this.$refs.upload.clearfiles() //上传成功后清空文件列表
this.$message({
message: '上传服务器成功',
type: 'success'
})
} else{
this.$message({
message: '上传服务器失败，请重试',
type: 'error'
})
}
}).catch(err => {
this.$message({
message: '上传服务器失败，请重试',
type: 'error'
})
})
},
}
}
上传方案二：
直接将文件上传到服务器
<div class="upload-music-container">
<el-upload
class="upload-music"
ref="upload"
multiple
action=""
:auto-upload="false"
:http-request="uploadfile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitupload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传mp3文件，且单次不超过500m</div>
</el-upload>
</div>
export default {
name: 'uploadmusic',
data() {
return {
filetype:'video',
filedata: new formdata(),
headers:{},
}
},
补充：element-ui实现多文件加表单参数上传
element-ui是分图片多次上传，一次上传一个图片。
如果想一次上传多个图片，就得关掉自动上传：auto-upload=‘false'，同时不使用element内置上传函数，换成自己写的onsubmit()
为了实现图片的添加删除，可在on-change与on-remove事件中取得filelist（filelist实质就是uploadfiles的别名，而uploadfiles就是element内置的用于保存待上传文件或图片的数组），在最后一步提交的过程中，将filelist中的值一一添加到formdata对象中（formdata.append()添加，formdata.delete()删除），然后统一上传。
ps：on-preview事件和<el-dialog>组件以及对应属性、方法这一体系是用来实现图片的点击放大功能。被注释掉的beforeupload只有一个实参，是针对单一文件上传时使用到的，这里无法用上
<template>
<div>
<el-upload
action="http://127.0.0.1:8000/api/uploadfile/"
list-type="picture-card"
:auto-upload="false"
:on-change="onchange"
:on-remove="onremove"
:on-preview="handlepicturecardpreview"
:before-remove="beforeremove"
>
<i class="el-icon-plus"></i>
</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 {host,batchtaginfo} from '../../api/api'
export default {
data() {
return {
param: new formdata(),
form:{},
count:0,
filelist:[],
dialogvisible:false,
dialogimageurl:''
};
},
methods: {
handlepicturecardpreview(file) {
this.dialogimageurl = file.url;
this.dialogvisible = true;
},
beforeremove(file, filelist) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
onchange(file,filelist){
this.filelist=filelist
},
onremove(file,filelist){
this.filelist=filelist
},
//阻止upload的自己上传，进行再操作
// beforeupload(file) {
// console.log('-------------------------')
// console.log(file);
// //创建临时的路径来展示图片
// //重新写一个表单上传的方法
// this.param = new formdata();
// this.param.append('file[]', file, file.name);
// this.form={
// a:1,
// b:2,
// c:3
// }
// // this.param.append('file[]', file, file.name);
// this.param.append('form',form)
// return true;
// },
fun(){
console.log('------------------------')
console.log(this.filelist)
},
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.filelist.length;i++){
file='file'+this.count
this.count++
this.param.append(file,this.filelist[i].raw)
}
batchtaginfo(this.param)
.then(res=>{
alert(res)
})
}
}
}
</script>
<style>
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。