ng2-file-upload 使用记录
最近这两周一直在修bug,修的很是痛苦,不过痛苦也是件好事,不然每天都是在做同样的事情,没有什么挑战,工作多无聊呀! 是吧。
大致说一下背景吧:
这个项目是两年前开新项目,到现在一直还在开发中,一直不停的向里边加新功能。
不停的加新功能,有些类似的功能,大家不免会偷懒,基本就是一下两种:
- 复用以前的实现,大致拿过来就用
- 或者把以前的组件改一改直接用
这次前人用的是第一种,直接用前人的前人引进来的组件库。稍作修改就直接用, 基本没什么问题。主流浏览器都是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 使用记录的更多相关文章
- 定制jQuery File Upload为微博式单文件上传
日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...
- 【DVWA】Web漏洞实战之File Upload
File Upload File Upload,即文件上传漏洞,一般的上传漏洞可能是未验证上传后缀 或者是验证上传后缀被bypass 或者是上传的文件验证了上传后缀但是文件名不重命名. LOW 直接上 ...
- jquery file upload示例
原文链接:http://blog.csdn.net/qq_37936542/article/details/79258158 jquery file upload是一款实用的上传文件插件,项目中刚好用 ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
- 【转发】Html5 File Upload with Progress
Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010Senior Sof ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jquery file upload 文件上传插件
1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...
- jQuery File Upload跨域上传
最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
随机推荐
- [转]oracle导入提示“IMP-00010:不是有效的导出文件,头部验证失败”的解决方案
这是由于导出的dmp文件与导入的数据库的版本不同造成的用Notepad++查看了dmp文件,在头部具修改成你将导入目标数据库的版本号以下对应的版本号: 11g R2:V11.02.00 11g R1: ...
- C#调用Python脚本的简单示例
C#调用Python脚本的简单示例 分类:Python (2311) (0) 举报 收藏 IronPython是一种在 .NET及 Mono上的 Python实现,由微软的 Jim Huguni ...
- [转]触发窗体事件(例如按Esc关闭窗体),WinForm
设置窗体属性KeyPreview=True. private void Form1_KeyUp(object sender, KeyEventArgs e) { if (e.KeyData == Ke ...
- Winfrom 实现转圈等待
1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...
- linux svn安装(转载)
第一章 安装 1. 采用源文件编译安装.源文件共两个,为:subversion-1.6.1.tar.gz (subversion 源文件)subversion-deps-1.6.1.tar.gz (s ...
- Android中measure过程、WRAP_CONTENT详解以及 xml布局文件解析流程浅析
转自:http://www.uml.org.cn/mobiledev/201211221.asp 今天,我着重讲解下如下三个内容: measure过程 WRAP_CONTENT.MATCH_PAREN ...
- 通过优化在UE4中实现良好性能和高质量视觉效果
转自:http://gad.qq.com/program/translateview/7160166 译者:赵菁菁(轩语轩缘) 审校:李笑达(DDBC4747) 对于任何追求UE4性能最佳.同时又想 ...
- Spark 编程模型(中)
先在IDEA新建一个maven项目 我这里用的是jdk1.8,选择相应的骨架 这里选择本地在window下安装的maven 新的项目创建成功 我的开始pom.xml文件配置 <project x ...
- python3调用C动态库
软硬件环境 OS X EI Capitan Python 3.5.1 GCC 4.9 前言 最近在做python3开发中,碰到了一个问题,需要通过调用C的一个动态链接库来获取相应的值.扒了扒网络,动手 ...
- filzilla
之前找了一套支援 SFTP (FTP over SSH) 的 FTP Server 就是為了解決 Port 不夠用的問題,直到最近才發現我們常用的 FileZilla Server 原來就有支援 FT ...