前言 最近在用vue開發一個后臺管理系統，搭配著Element-UI一起使用。其中一個部分用到了Element-UI中的upload組件，在用的過程中碰到了不少的小坑，官網上一些函數的用法只是在Attribute屬性中做了一些簡介，我覺得還不夠清晰，所以想寫一些我在第一次使用upload組件時候遇到的坑和小問題給大家分享一下。 坑1/:onSuccess:'uploadSuccess' onError:'uploadError' clipboard.png 剛看到紅色文字的我，很激動，心里理所應當的就認為：觸發on-success鉤子的時候就代表文件上傳成功，觸發on-error的時候就代表著文件上傳失敗。于是嘩嘩嘩就寫下了下面幾行代碼。 uploadSuccess(){ this.$message({ message: '恭喜你，上傳成功', type: 'success' }); }, uploadError(){ this.$message.error('上傳失敗，請重新上傳'); } 嘿嘿嘿，很開心，以為這兩個鉤子已經完美的處理了我的問題了。在后來測試發現，無論上傳成功上傳失敗顯示的都是：恭喜你，上傳生成。這時候我就發現問題來了，上傳成功與失敗是根據后臺小哥給我返回的status來判斷的（我我們這邊定義好的接口），當他返回的status的值為1時就是上傳成功，status的值為0的時候就是文件已經存在，status的值為-1的時候就上傳失敗。由于后臺沒有給我拋出錯誤，所以根本不會走到on-error這個鉤子。這時候我再仔細的看官方文檔發現on-success鉤子的函數中function(response, file, fileList)第一個參數是response，也就是后臺給我們返回的結果。于是我把代碼改成下面這樣子，終于完美的解決了這個問題。 uploadSuccess(res){ if(res.status==1){ this.$message({ message: '恭喜你，上傳成功', type: 'success' }); }else if(res.status==0){ this.$message({ message: res.msg, type: 'warning' }); }else{ this.$message.error('上傳失敗，請重新上傳'); } }, uploadError(){ this.$refs.upload.clearFiles(); this.$message.error('上傳失敗，請重新上傳'); } } 坑2/異步問題 老大想讓我在文件上傳前，加一個彈框，讓用戶修改文件名字的功能。于是我就想，在before-upload這個鉤子上處理就好了吧（注明：before-upload這個鉤子return fasle的話，文件會停止上傳的）。于是我在before-upload鉤子上直接加了個彈框，代碼類似下面的。 :before-upload="beforeUpload" beforeUpload(){ this.$prompt('請輸入文件名', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', inputValue：this.value, }).then(({ value }) => { return true; }).catch(() => { return false; }); } 很可惜哈哈哈，這個函數是異步執行的，然后upload組件默認是自動上傳的，因為沒有等到return，upload組件已經自動上傳完畢了。激不激動，驚不驚喜。 于是我決定把自動上傳文件這個功能給關閉了。 如何關閉？ <el-upload ref="upload" :auto-upload="false"> <el-button size="small" type="primary">點擊上傳</el-button> </el-upload> 通過設置:auto-upload="false"這個屬性就可以關閉自動上傳的功能了。 那么關閉自動上傳功能以后如何手動提交？ 加個ref屬性，然后通過this.$refs.upload.submit();就可以手動提交了。 不想加個一個提交按鈕的情況下，我應該在哪里提交呢？ clipboard.png 在官方文檔中可以發現有一個on-change的鉤子，它是一個檢測文件狀態改變時的鉤子，讓我欣喜的是它可以檢測添加文件時的狀態，讓我難過的是：添加文件、上傳成功和上傳失敗時都會被調用。 但是我還是覺得這個鉤子函數充滿了希望，于是對它進行多次的測試，發現它的file對象中包含了文件上傳的狀態，于是我就檢測判斷是否添加完文件后的狀態。添加完文件后，彈框讓用戶輸入文件名，當用戶點擊確認按鈕再手動觸發this.$refs.upload.submit()提交上傳。代碼如下： changeFile(file){ if(file.status=='ready'){ this.$prompt('請輸入上傳后的文件名', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', inputValue:file.name }).then(({ value }) => { this.fileName.name = value; this.$refs.upload.submit(); }).catch(() => { this.$refs.upload.clearFiles(); this.$message({ type: 'info', message: '取消文件上傳' }); }); } } 小tips clipboard.png 在官方文檔中可以看到，upload組件中有2個Methods，這兩個Methods是怎么調用了呢，其實上面也有涉及到。定義一個refs屬性（注意后面的upload是我refs中定義的名字），然后通過this.$refs.upload.clearFiles()、this.$refs.upload.abort()即可調用。clearsFiles可以清空顯示在頁面上的文件列表。