最近这两周一直在修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. [转]oracle导入提示“IMP-00010:不是有效的导出文件,头部验证失败”的解决方案

    这是由于导出的dmp文件与导入的数据库的版本不同造成的用Notepad++查看了dmp文件,在头部具修改成你将导入目标数据库的版本号以下对应的版本号: 11g R2:V11.02.00 11g R1: ...

  2. C#调用Python脚本的简单示例

    C#调用Python脚本的简单示例 分类:Python (2311)  (0)  举报  收藏 IronPython是一种在 .NET及 Mono上的 Python实现,由微软的 Jim Huguni ...

  3. [转]触发窗体事件(例如按Esc关闭窗体),WinForm

    设置窗体属性KeyPreview=True. private void Form1_KeyUp(object sender, KeyEventArgs e) { if (e.KeyData == Ke ...

  4. Winfrom 实现转圈等待

    1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...

  5. linux svn安装(转载)

    第一章 安装 1. 采用源文件编译安装.源文件共两个,为:subversion-1.6.1.tar.gz (subversion 源文件)subversion-deps-1.6.1.tar.gz (s ...

  6. Android中measure过程、WRAP_CONTENT详解以及 xml布局文件解析流程浅析

    转自:http://www.uml.org.cn/mobiledev/201211221.asp 今天,我着重讲解下如下三个内容: measure过程 WRAP_CONTENT.MATCH_PAREN ...

  7. 通过优化在UE4中实现良好性能和高质量视觉效果

    转自:http://gad.qq.com/program/translateview/7160166 译者:赵菁菁(轩语轩缘)  审校:李笑达(DDBC4747) 对于任何追求UE4性能最佳.同时又想 ...

  8. Spark 编程模型(中)

    先在IDEA新建一个maven项目 我这里用的是jdk1.8,选择相应的骨架 这里选择本地在window下安装的maven 新的项目创建成功 我的开始pom.xml文件配置 <project x ...

  9. python3调用C动态库

    软硬件环境 OS X EI Capitan Python 3.5.1 GCC 4.9 前言 最近在做python3开发中,碰到了一个问题,需要通过调用C的一个动态链接库来获取相应的值.扒了扒网络,动手 ...

  10. filzilla

    之前找了一套支援 SFTP (FTP over SSH) 的 FTP Server 就是為了解決 Port 不夠用的問題,直到最近才發現我們常用的 FileZilla Server 原來就有支援 FT ...