ng2-file-upload 使用记录

Posted 2021-02-10 qulianqing

最近这两周一直在修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的几率也会下降一点。