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的概率也會降低一點。