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)

})

}

}

}

以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援腳本之家。