最近在做項(xiàng)目的時(shí)候有一個(gè)需求，需要導(dǎo)入word文檔，并且需要支持多選。element-ui 的 upload 組件支持多選文件，只需要配置參數(shù) multiple 為 true 即可。但是這個(gè)組件默認(rèn)會(huì)將多選的文件分多次進(jìn)行上傳，于是就會(huì)存在多次的上傳請(qǐng)求，由于后臺(tái)的接口要求是一次請(qǐng)求能夠上傳多個(gè)文件，且我們也知道請(qǐng)求多了會(huì)對(duì)服務(wù)器造成更大的壓力，因而基于多種原因，這個(gè) upload 的上傳行為得進(jìn)行改造一番。

先來(lái)看下改造前后的結(jié)果

改造前的結(jié)果：同時(shí)上傳2個(gè)文件，會(huì)發(fā)出2次對(duì)接口的請(qǐng)求，每次請(qǐng)求里包含了一個(gè)文件。

upload_result_before

改造后的結(jié)果：同時(shí)上傳2個(gè)文件，會(huì)發(fā)出一次接口請(qǐng)求，接口入?yún)⒗锇?個(gè)文件。

upload_result_after

方法一：通過(guò)配置file-list(推薦使用)

html部分：

:on-change="fileChange" :on-remove="fileRemove" :auto-upload="false" style="display: inline-block;">

點(diǎn)擊選擇身份證明文件(正反面兩張，多選)

只能上傳圖片格式文件

確認(rèn)上傳

js部分：

//檢測(cè)文件變動(dòng)獲取文件

fileChange(file, fileList) {

this.fileList = fileList;

}

//檢測(cè)文件刪除

fileRemove(file, fileList) {

this.fileList = fileList;

}

//手動(dòng)模擬提交上傳

submitUpload() {

console.log("this.fileList", this.fileList)

// this.$refs.upload.submit();

let formData = new FormData(); // 用FormData存放上傳文件

this.fileList.forEach(file => {

formData.append('file', file.raw)

})

// 調(diào)用上傳接口

editEviCard(formData).then((res) => {

//手動(dòng)上傳無(wú)法觸發(fā)成功或失敗的鉤子函數(shù)，因此這里手動(dòng)調(diào)用

this.upSuccess(res)

}, (err) => {

this.upError(err)

})

}

upSuccess(res) { //上傳成功

if (res.data.state === 100) {

Message.success({

message: "文件上傳成功！"

})

} else {

Message.error({

message: "文件上傳失敗！"

})

}

}

upError(err) { //上傳失敗

Message.error({

message: "文件上傳失敗！"

})

}

關(guān)鍵代碼說(shuō)明：

auto-upload 設(shè)置為 false 用于關(guān)閉組件的自動(dòng)上傳；

file-list 配置一個(gè)數(shù)組用于接收上傳的文件列表；

multiple 設(shè)置為 true 表示支持多選文件；

action 配置為完整的上傳接口url，不配置會(huì)報(bào)錯(cuò)

不用配置 data、on-success、on-error等參數(shù)，因?yàn)槭謩?dòng)上傳不會(huì)用到這些配置信息；

最后通過(guò)點(diǎn)擊按鈕手動(dòng)調(diào)用上傳函數(shù) submitUpload ，創(chuàng)建一個(gè) FormData 把 fileList 的文件存進(jìn)去。

方法二：通過(guò)配置http-request

html部分：

class="upload-demo list-uploadbtn"

ref="upload"

:action="curBastUrl"

:auto-upload="false"

:http-request="uploadFile"

:on-remove="updataRemove"

:before-upload="beforeUpload"

:on-change="updatachange"

:multiple="true">

點(diǎn)擊上傳

確 定

js部分：

submitUpload() { // 導(dǎo)入

let tempData = this.filedata

this.filedata = new FormData() // 用FormData存放上傳文件

this.$refs.upload.submit() // 會(huì)循環(huán)調(diào)用uploadFile方法，多個(gè)文件調(diào)用多次

this.filedata.append('categoryDirectory', tempData.categoryDirectory)

// importCase是上傳接口

importCase(this.filedata).then((res) => {

//手動(dòng)上傳無(wú)法觸發(fā)成功或失敗的鉤子函數(shù)，因此這里手動(dòng)調(diào)用

this.updataSuccess(res.data)

}, (err) => {

})

}

uploadFile(file) {

this.filedata.append('file', file.file)

}

關(guān)鍵代碼說(shuō)明：

http-request 自定義上傳方法；

最后通過(guò)點(diǎn)擊按鈕手動(dòng)調(diào)用上傳函數(shù) submitUpload ，創(chuàng)建一個(gè) FormData, 調(diào)用 upload 組件的 submit 方法的時(shí)候會(huì)循環(huán)調(diào)用 http-request 配置的方法，從而往 FormData 里存放文件。

總結(jié)

以上是生活随笔為你收集整理的elementui中同时上传多个文件_2019-12-19 element-ui文件上传 一次请求上传多个文件...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。