最近在用 Vue 開發項目的時候有一個需求，需要導入 word 文檔，并且需要支援多選。element-ui 的 upload 元件支援多選檔案，隻需要配置參數 multiple 為 true 即可。但是這個元件預設會将多選的檔案分多次進行上傳，于是就會存在多次的上傳請求，由于背景的接口要求是一次請求能夠上傳多個檔案，且我們也知道請求多了會對伺服器造成更大的壓力，因而基于多種原因，這個 upload 的上傳行為得進行改造一番。
先來看下改造前後的結果
改造前的結果：同時上傳2個檔案，會發出2次對接口的請求，每次請求裡包含了一個檔案。
改造後的結果：同時上傳2個檔案，會發出一次接口請求，接口入參裡包含2個檔案。
方法一：通過配置file-list（推薦使用）
html部分：
<el-uploadclass="upload-demo list-uploadbtn"ref="upload":action="curBastUrl":auto-upload="false":on-remove="updataRemove":before-upload="beforeUpload":on-change="updatachange":file-list="fileList":multiple="true"><el-button size="small">點選上傳</el-button></el-upload><el-button type="primary" @click="submitUpload">确 定</el-button>複制代碼 js部分：
submitUpload() { // 導入let formData = new FormData(); // 用FormData存放上傳檔案this.fileList.forEach(file => {
formData.append('file', file.raw)
})
formData.append('categoryDirectory', this.filedata.categoryDirectory)// importCase是上傳接口importCase(formData).then((res) => { //手動上傳無法觸發成功或失敗的鈎子函數，是以這裡手動調用 this.updataSuccess(res.data)
}, (err) => {
})
}複制代碼 關鍵代碼說明：
- auto-upload 設定為 false 用于關閉元件的自動上傳；
- file-list 配置一個數組用于接收上傳的檔案清單；
- multiple 設定為 true 表示支援多選檔案；
- action 配置為完整的上傳接口url，不配置會報錯
- 不用配置 data、on-success、on-error等參數，因為手動上傳不會用到這些配置資訊；
- 最後通過點選按鈕手動調用上傳函數 submitUpload ，建立一個 FormData 把 fileList 的檔案存進去。
方法二：通過配置http-request
<el-uploadclass="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"><el-button size="small">點選上傳</el-button></el-upload><el-button type="primary" @click="submitUpload">确 定</el-button>複制代碼 submitUpload() { // 導入let tempData = this.filedatathis.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 裡存放檔案。