ng2-file-upload 使用記錄

最近這兩周一直在修bug，修的很是痛苦，不過痛苦也是件好事，不然每天都是在做同樣的事情，沒有什么挑戰，工作多無聊呀！ 是吧。

大致說一下背景吧：

這個項目是兩年前開新項目，到現在一直還在開發中，一直不停的向里邊加新功能。

不停的加新功能，有些類似的功能，大家不免會偷懶，基本就是一下兩種：

1. 復用以前的實現，大致拿過來就用
2. 或者把以前的組件改一改直接用

這次前人用的是第一種，直接用前人的前人引進來的組件庫。稍作修改就直接用， 基本沒什么問題。主流瀏覽器都是OK的。但是有個坑爹的IE不能不考慮.

測試人員在IE上測發現了bug:

我們在上傳文件的時候，會有一個遮罩，等上傳成功之后，這個遮罩會消失， 但是在IE里卻不會消失，導致文件上傳成功，遮罩依舊還在。

本人前端菜鳥一個，當時很慌，准備把這個問題給我們組里的前端大牛去處理，無奈大牛比較忙。於是開始了探索之旅。

這個初始化代碼

  this.uploader = new FileUploader({
      url: 'URL'
      authToken: 'Bearer TOKEN'
      additionalParameter: '********'
    });

上傳文件代碼

this.uploader.queue.forEach(item => {
      const size = item.file.size / 1024 / 1024;
      if (size <= MAX_FILE_SIZE) {
        item.upload();
       /* 開啟新的遮罩*/
       ***********
      item.onComplete = (response: string, status: number) => {
            this.uploader.clearQueue();
            // 終止當前遮罩
          };
         // handle some other logic 
          ***************
      } else {
        alert("上傳失敗，附件大小不可超過20M")
        this.uploader.removeFromQueue(item);
      }

解釋一下代碼：

獲取文件上傳的隊列，遍歷隊列元素，進行max file size 的檢查， 上傳文件，開啟遮罩。
訂閱文件上傳完成事件：清空上傳隊列（這里沒有設置multiple），關閉遮罩

這個代碼在其他瀏覽器里是沒有問題的，但是在IE里會出現這么一種情況：

一次click 會觸發兩次的文件上傳邏輯的代碼。 導致 item.onComplete = (response: string, status: number) => { 這行代碼在第一次執行訂閱時間的時候，會拋出一個 引用的object未定義的異常。

debug了很久也沒找到原因，由於mac 開windows的虛擬機很卡，mac上跑本地環境，然后在虛擬機里debug體驗很差。於是准備放棄了，研究一下文檔，看木有推薦的姿勢，覺得這個姿勢不太好。github上的project上次提交時幾年前的，於是很絕望，clone下來，看了兩個小時的源代碼，找到了好看的姿勢，一切都用事件訂閱的形式，不去處理其他額外的邏輯。
這是修改后的代碼
初始化加了maxFileSize

  this.uploader = new FileUploader({
      url: 'URL'
      authToken: 'Bearer TOKEN'
      additionalParameter: '********'
     **maxFileSize: MAX_FILE_SIZE**,
    });

訂閱開始上傳每個文件的事件： 開啟遮罩

    this.uploader.onBeforeUploadItem = () => // 開啟遮罩;

訂閱每個文件上傳完成后的時間：關閉遮罩，處理其他邏輯

    this.uploader.onCompleteItem = (item, response, status) => {
      // 關閉遮罩
      // handle some other logic
    }

訂閱文件添加失敗的事件，也就是文件大於max file size 的事件

    this.uploader.onWhenAddingFileFailed = () => {
      alert（'bla bla'）;
            this.uploader.clearQueue();
    }

按鈕點擊的時候直接file upload all 就行了，其他的全交給訂閱的事件去處理了

    this.uploader.uploadAll();

問題就樣莫名其妙的消失了。 所以寫代碼要堅持用優雅的姿勢，能少些一行代碼，就少寫一行，bug的幾率也會下降一點。