今天碰見了一個小問題，拿來分享一下：

• 前幾天寫了一個大文件上傳的組件，文件傳輸時涉及到了文件是否在隊列，文件名字是否相同，相同的情況下需要改名或者是直接覆蓋或者是放棄上傳這三種情況，檢查名字時候也需要檢查MD5是否相同，如果相同的情況下需要哪幾種操作，檢查完后還需要檢查安全性，還需.........
• 我不想再說了真心麻煩，但考慮到vue可用的文件上傳的組件很有限，同時功能很單一，并且傳輸大文件時，后臺一般為了減輕服務器的壓力，對每次上傳的大小做了限制，所以我們要想通過一個請求將1G的文件傳上去，想都別想！連100M都不給你機會，所以在前端的處理過程中我們需要將大文件進行分片連續(xù)發(fā)送多次請求。鑒這種極其無奈的情況下引入了webUploader，這個組件對于各種上傳功能的實現(xiàn)和添加各種驗證同時開放了在原型上添加方法和鉤子的API，確實是挺不錯的！但，但最可惡的是這是一個jq插件，萬般無奈又把jQuery引進來。雖然jq引進來了，但只在封裝這個組件的時候用也還好，不到100k，對于整個項目來說還可以接受。
• 發(fā)現(xiàn)自己扯遠了,有點文不對題了，對于大文件用webUploader封好的組件，但今天我發(fā)現(xiàn)項目里還有一個簡單的圖片上傳的功能，感覺沒必要去引封裝的組件，自己本身已經(jīng)將element的上傳upload組件引進來了，對于這種小文件的上傳感覺用到就夠了，但在寫業(yè)務時，發(fā)現(xiàn)后臺那邊給的上傳接口中必傳的參數(shù)是文件的md5值，本身自帶的upload并沒有計算MD5的API,所以需要在文件上傳之前before-upload方法上進行formdata.md5=md5,這時候坑就出現(xiàn)了，當我按照正常的邏輯寫完代碼后臺返回的數(shù)據(jù)
  
  上傳錯誤
  
  
  傳的參數(shù)為啥沒值
  
  
  vue-devtools中顯示的data
  
  我懵了，神馬情況？看看代碼

 // 圖片上傳之前
      logoBeforeUpload(file) {
        const self = this
        // 計算md5并傳給upload組件
        this.fileMd5Calculate(file, (md5) => {
          console.log(md5);
          debugger
          self.$set(self.postData, 'md5', md5)
        })
      }

感覺邏輯也沒有寫錯呀，況且el-upload組件的props中md5確實已經(jīng)有值了，這是腫么情況，打個斷點吧，

感覺找到錯誤了

我去，在beforeUpload中為啥我的邏輯還沒走完，它就先給我觸發(fā)上傳了？？仔細看了一下代碼，fileMd5Calculate計算文件md5是個耗時工程，且我賦給md5又是個異步，而element封裝的upload的方法才不管你是不是異步，我該運行就運行，擦擦擦。。。
找到問題了，就把代碼改一下

// 圖片上傳之前
      logoBeforeUpload(file) {
        const self = this
        // 當文件上傳之前必須返回false或promise才能阻止文件上傳，當我們對文件進行配置后，我們需要繼續(xù)            
           運行所以通過promise的resolve
        return new Promise((resolve, reject) => {
          // 計算md5并傳給upload組件
          self.fileMd5Calculate(file, (md5) => {
          console.log(md5);
          self.$set(self.postData, 'md5', md5)
          // 繼續(xù)執(zhí)行上傳
          resolve()
        })
        })
      }

用個promise吧（也給自己大大的備注），當我們md5賦值的過程進行完成后我們再觸發(fā)真正的上傳操作，
這時候成功了

成功了