element-ui upload組件

前言

最近在用vue開發一個後臺管理系統，搭配着Element-UI一塊兒使用。其中一個部分用到了Element-UI中的upload組件，在用的過程當中碰到了很多的小坑，官網上一些函數的用法只是在Attribute屬性中作了一些簡介，我以爲還不夠清晰，因此想寫一些我在第一次使用upload組件時候遇到的坑和小問題給你們分享一下。

坑1/:onSuccess:'uploadSuccess' onError:'uploadError'

剛看到紅色文字的我，很激動，內心理所應當的就認爲：觸發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();就能夠手動提交了。
不想加個一個提交按鈕的狀況下，我應該在哪裏提交呢？

在官方文檔中能夠發現有一個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

在官方文檔中能夠看到，upload組件中有2個Methods，這兩個Methods是怎麼調用了呢，其實上面也有涉及到。定義一個refs屬性（注意後面的upload是我refs中定義的名字），而後經過this.$refs.upload.clearFiles()、this.$refs.upload.abort()便可調用。clearsFiles能夠清空顯示在頁面上的文件列表。