使用element-ui怎么實(shí)現(xiàn)一個(gè)多文件上傳功能
這篇文章將為大家詳細(xì)講解有關(guān)使用element-ui怎么實(shí)現(xiàn)一個(gè)多文件上傳功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、蜀山網(wǎng)站維護(hù)、網(wǎng)站推廣。
上傳方案一：
先將文件上傳到七牛，再將七牛上傳返回的文件訪問(wèn)路徑上傳到
選取文件
僅支持上傳mp3文件，文件大小不超過(guò)500M
上傳到服務(wù)器
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: '獲取憑證失敗，請(qǐng)重試',
type: 'error'
})
}
})
},
//獲取音頻文件時(shí)長(zhǎng)
getVideoPlayTime(file, fileList) {
let self = this
//獲取錄音時(shí)長(zhǎng)
try {
let url = URL.createObjectURL(file.raw);
//經(jīng)測(cè)試，發(fā)現(xiàn)audio也可獲取視頻的時(shí)長(zhǎng)
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)
}
},
//校驗(yàn)上傳文件大小
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: '上傳文件不能不超過(guò)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)
},
//上傳服務(wù)器數(shù)據(jù)格式化
getUploadMusicList() {
let musicList = []
for (let file of this.fileList) {
if (file.response && file.response.key) {
musicList.push({
"play_time": file.duration, //播放時(shí)長(zhǎng)
"size": file.size/1024, //文件大小 單位 kb
"song_name": file.name, //歌曲名
"voice_url": "xxxx" //上傳七牛返回的訪問(wèn)路徑
})
}
}
return musicList
},
//上傳至服務(wù)器
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: '上傳服務(wù)器成功',
type: 'success'
})
} else{
this.$message({
message: '上傳服務(wù)器失敗，請(qǐng)重試',
type: 'error'
})
}
}).catch(err => {
this.$message({
message: '上傳服務(wù)器失敗，請(qǐng)重試',
type: 'error'
})
})
},
}
}
上傳方案二：
直接將文件上傳到服務(wù)器
選取文件
上傳到服務(wù)器
只能上傳mp3文件，且單次不超過(guò)500M
export default {
name: 'uploadMusic',
data() {
return {
fileType:'video',
fileData: new FormData(),
headers:{},
}
},如果想一次上傳多個(gè)圖片，就得關(guān)掉自動(dòng)上傳：auto-upload=‘false'，同時(shí)不使用element內(nèi)置上傳函數(shù)，換成自己寫(xiě)的onsubmit()
為了實(shí)現(xiàn)圖片的添加刪除，可在on-change與on-remove事件中取得filelist（filelist實(shí)質(zhì)就是uploadFiles的別名，而uploadFiles就是element內(nèi)置的用于保存待上傳文件或圖片的數(shù)組），在最后一步提交的過(guò)程中，將filelist中的值一一添加到formdata對(duì)象中（formdata.append()添加，formdata.delete()刪除），然后統(tǒng)一上傳。
關(guān)于使用element-ui怎么實(shí)現(xiàn)一個(gè)多文件上傳功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
