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

ng2-file-upload 使用记录的更多相关文章

  1. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  2. 【DVWA】Web漏洞实战之File Upload

    File Upload File Upload,即文件上传漏洞,一般的上传漏洞可能是未验证上传后缀 或者是验证上传后缀被bypass 或者是上传的文件验证了上传后缀但是文件名不重命名. LOW 直接上 ...

  3. jquery file upload示例

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79258158 jquery file upload是一款实用的上传文件插件,项目中刚好用 ...

  4. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  5. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  6. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  7. 【转发】Html5 File Upload with Progress

    Html5 File Upload with Progress               Posted by Shiv Kumar on 25th September, 2010Senior Sof ...

  8. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  9. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  10. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

随机推荐

  1. SpringMVC Controller 介绍及常用注解

    摘要: @Controller.@RequestMapping(属性:value.params .method.headers).@PathVariable.@RequestParam.@Cookie ...

  2. Spring 相关注解

    spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller. 在目前的 Sprin ...

  3. 从Vue文件到Html文件

    如下图,通过webpack打包工具,将一个Vue文件生成html,css,js文件.其中js对应的是new Vue({})

  4. ssl证书(https) iis 配置安装

    因客户给的 cer的文件 导入提示 失败,所以用 了 客户给的 crt的格式的证书. 安装证书操作如下:iis>>服务器证书>>右侧菜单-完成证书申请>>选择 本文 ...

  5. centos6+nginx+php+mysql+memcached+wordpress

    centos6+nginx+php+mysql+memcached+wordpress 搭建步骤(1) LNMP 平台搭建: 请参考:http://www.cnblogs.com/ligao/p/61 ...

  6. python学习笔记--pycurl模块安装遇到的问题。

    1.用easy_install安装的时候 [root@idayuan ~]# easy_install pycurl Searching for pycurl Best match: pycurl A ...

  7. 【Ethereum】以太坊ERC20 Token标准完整说明

    什么是ERC20 token 市面上出现了大量的用ETH做的代币,他们都遵守REC20协议,那么我们需要知道什么是REC20协议. 概述 token代表数字资产,具有价值,但是并不是都符合特定的规范. ...

  8. 读取 Excel 之 NPOI

    HSSFWorkbook hssfworkbook; void InitializeWorkbook(string path) { //read the template via FileStream ...

  9. [UE4]C++ string的用法和例子

    使用场合: string是C++标准库的一个重要的部分,主要用于字符串处理.可以使用输入输出流方式直接进行操作,也可以通过文件等手段进行操作.同时C++的算法库对string也有着很好的支持,而且st ...

  10. bravado哺乳内衣适合试穿体验,分享给需要买哺乳内衣的妈妈们。

    看来看去还是觉得在美德乐天猫旗舰店(www.bravadobravado.com)购买最保险. 这款内衣穿起来非常舒服,感觉一点都不勒,而且面料也很透气,我生宝宝之前怀孕的时候穿80C,这个本来一开始 ...