[TOC] >[success] # Element ui做批量上傳功能 ~~~ 如下圖：'element ui'所說的多文件上傳實際上是，'每個文件都會單獨走一次接口，多次走接口' ~~~  ~~~ 而我想要的是下圖這種，'一個接口上傳多個文件' ~~~  1. html代碼 ~~~ <template> <div> <!-- 隱藏的上傳組件 Start --> <el-upload v-show="false" ref="uploadFile" action :multiple="true" accept=".xlsx" :limit="100" :on-exceed="handleExceed" :http-request="uploadPathBillingData" :auto-upload="true"> </el-upload> <!-- 上傳按鈕，點擊時候會手動調用ref觸發上傳組件上傳方法 --> <el-button size="small" @click="handleBeforeUpload">上傳數據</el-button> </div> </template> ~~~ ~~~ 這里用到的幾個'主要屬性'和'事件'： 1. 'v-show="false"'：想做一個'確定要上傳數據么？'的'提示信息'，'element ui'不支持這樣做，所以 下面寫了一個'上傳按鈕'，點擊'上傳按鈕'時候會先'給出提示'，然后'確定后會彈出選擇文件窗口' 2. 'multiple="true"'：是否支持多選文件 3. 'limit="100"'：最大允許上傳個數 4.':on-exceed'：文件超出個數限制時的鉤子 5. 'http-request'：自定義上傳事件（正常來說，上傳文件'走接口的邏輯在這里寫'） 6. 'auto-upload="true"'：是否在選取文件后立即進行上傳，這里設置為'true'，設置為'true'后， 選中了幾個文件，他就會走幾次'http-request'屬性對應的方法，也就是會'走幾次接口' ~~~~ 2. JS代碼 ~~~ <script> export default{ data(){ return { filedata: null, // 儲存文件的formData對象 errorMassageList: [], // 錯誤信息列表 timer: null, // 定時器 isMaskLayer: false // 彈窗控制 } }, methods: { async handleBeforeUpload(){ // 01. 確認要上傳數據嗎？ try{ await this.$confirm(`確定要上傳數據么？`, '提示', { closeOnClickModal: false, confirmButtonText: '確定', cancelButtonText: '取消' }); this.filedata = new FormData(); this.$refs['uploadFile'].$refs['upload-inner'].handleClick() // 通過$refs模擬點擊上傳按鈕 } catch(e) { return } }, uploadPathBillingData(){ // 02. 自動向formData對象中添加文件 // 驗證規則 let isFile = file.file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; // 驗證文件格式和文件size if(!isFile){ this.errorMassageList.push(`【${ file.file.name }】上傳文件格式不正確`) } else if(file.file.size <= 0){ this.errorMassageList.push(`【${ file.file.name }】上傳數據不能為空`) } // 向formData對象中添加要上傳的文件 this.filedata.append('files', file.file) this.proxySynchronousFile() }, proxySynchronousFile(){ // 03. 監聽是否完成添加文件操作，如果完成自動上傳文件 // 每次進入清除上次的定時器，清除后重新從0開始計時 if(this.timer) { this.handleTimeout(); } // lodding彈窗控制顯示，上傳多個文件會走多次，為了讓lodding只執行一次 if(!this.isMaskLayer){ this.$store.commit("SHOW_WAITING"); this.isMaskLayer = true; // 彈窗狀態重置 } // 開始進入自動上傳步驟 this.timer = setTimeout(async () =>{ // 文件錯誤驗證提示判斷 if(this.errorMassageList.length > 0){ this.$store.commit("CLOSE_WAITING"); this.isMaskLayer = false; // 彈窗狀態重置,這里一定要在message彈出的上面重置 this.$message.error(this.errorMassageList[0]); this.filedata = null; // 清空formData文件列表 this.errorMassageList = []; // this.handleTimeout(); // 清空定時器 this.$refs.uploadFile.clearFiles() // 清空緩存的文件列表 return; } // 上傳文件操作 try { this.filedata.append("districtCode", this.districtCode); const res = await importDistrictSelf(this.filedata); this.handleTimeout(); // 清除定時器 this.filedata = null; // 清空formData文件列表 this.errorMassageList = []; // 清空錯誤信息列表 this.$refs.uploadFile.clearFiles() // 清空緩存的文件列表 } catch(e){ console.warn(e) this.$message.error(e && e.message); } finally { this.$store.commit("CLOSE_WAITING"); this.isMaskLayer = false; // 彈窗狀態重置 } }, 2000); }, handleTimeout(){ // 清空定時器方法 clearTimeout(this.timer); this.timer = null; } } } </script> ~~~ <br/> >[success] ## 利用防抖的思想做自動上傳功能 **防抖的思想**：第一次觸發事件后，函數**不會立即執行**，而是**設置一個N秒的定時器**，在這個時間內，如果事件**再次觸發**，則**打破定時器同時生成一個新的N秒定時器，直到某個定時器完整結束且沒有生成新的定時器，則執行相應函數**，利用這個思想來做**自動上傳功能**。 ~~~ let timer = null // 定時器 function timeout() { console.log('測試一下會抖動幾次') // 有定時器就清空定時器 if (timer) { clearTimeout(timer) timer = null } // 新建一個定時器 timer = setTimeout(() => { console.log('執行最后一次要執行的代碼') }, 2000) } for (let i = 0; i < 3; i++) { // 模擬多次抖動 timeout() } ~~~