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