elementui中同时上传多个文件_element-ui多文件上传的实现示例

上传方案一：

先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器

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">

选取文件

仅支持上传mp3文件，文件大小不超过500M

上传到服务器

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'

})

})

},

}

}

上传方案二：

直接将文件上传到服务器

class="upload-music"

ref="upload"

multiple

action=""

:auto-upload="false"

:http-request="uploadFile">

选取文件

上传到服务器

只能上传mp3文件，且单次不超过500M

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事件和组件以及对应属性、方法这一体系是用来实现图片的点击放大功能。被注释掉的beforeupload只有一个实参，是针对单一文件上传时使用到的，这里无法用上

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"

>

点击查看filelist

提交

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

file='file'+this.count

this.count++

this.param.append(file,this.fileList[i].raw)

}

batchTagInfo(this.param)

.then(res=>{

alert(res)

})

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。