最近在做項目的時候有一個需求，需要導入word文檔，并且需要支持多選。element-ui 的 upload 組件支持多選文件，只需要配置參數 multiple 為 true 即可。但是這個組件默認會將多選的文件分多次進行上傳，于是就會存在多次的上傳請求，由于后臺的接口要求是一次請求能夠上傳多個文件，且我們也知道請求多了會對服務器造成更大的壓力，因而基于多種原因，這個 upload 的上傳行為得進行改造一番。

先來看下改造前后的結果

改造前的結果：同時上傳2個文件，會發出2次對接口的請求，每次請求里包含了一個文件。

upload_result_before

改造后的結果：同時上傳2個文件，會發出一次接口請求，接口入參里包含2個文件。

upload_result_after

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

html部分：

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

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

只能上傳圖片格式文件

確認上傳

js部分：

//檢測文件變動獲取文件

fileChange(file, fileList) {

this.fileList = fileList;

}

//檢測文件刪除

fileRemove(file, fileList) {

this.fileList = fileList;

}

//手動模擬提交上傳

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)

})

// 調用上傳接口

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

//手動上傳無法觸發成功或失敗的鉤子函數，因此這里手動調用

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: "文件上傳失敗！"

})

}

關鍵代碼說明：

auto-upload 設置為 false 用于關閉組件的自動上傳；

file-list 配置一個數組用于接收上傳的文件列表；

multiple 設置為 true 表示支持多選文件；

action 配置為完整的上傳接口url，不配置會報錯

不用配置 data、on-success、on-error等參數，因為手動上傳不會用到這些配置信息；

最后通過點擊按鈕手動調用上傳函數 submitUpload ，創建一個 FormData 把 fileList 的文件存進去。

方法二：通過配置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">

點擊上傳

確 定

js部分：

submitUpload() { // 導入

let tempData = this.filedata

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

this.$refs.upload.submit() // 會循環調用uploadFile方法，多個文件調用多次

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

// importCase是上傳接口

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

//手動上傳無法觸發成功或失敗的鉤子函數，因此這里手動調用

this.updataSuccess(res.data)

}, (err) => {

})

}

uploadFile(file) {

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

}

關鍵代碼說明：

http-request 自定義上傳方法；

最后通過點擊按鈕手動調用上傳函數 submitUpload ，創建一個 FormData, 調用 upload 組件的 submit 方法的時候會循環調用 http-request 配置的方法，從而往 FormData 里存放文件。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。