如何作到發送一次請求上傳多個文件（使用 el-upload）

最近在用 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

html部分：

<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>複製代碼

js部分：

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  裏存放文件。