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三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
随机推荐
- SpringMVC Controller 介绍及常用注解
摘要: @Controller.@RequestMapping(属性:value.params .method.headers).@PathVariable.@RequestParam.@Cookie ...
- Spring 相关注解
spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller. 在目前的 Sprin ...
- 从Vue文件到Html文件
如下图,通过webpack打包工具,将一个Vue文件生成html,css,js文件.其中js对应的是new Vue({})
- ssl证书(https) iis 配置安装
因客户给的 cer的文件 导入提示 失败,所以用 了 客户给的 crt的格式的证书. 安装证书操作如下:iis>>服务器证书>>右侧菜单-完成证书申请>>选择 本文 ...
- centos6+nginx+php+mysql+memcached+wordpress
centos6+nginx+php+mysql+memcached+wordpress 搭建步骤(1) LNMP 平台搭建: 请参考:http://www.cnblogs.com/ligao/p/61 ...
- python学习笔记--pycurl模块安装遇到的问题。
1.用easy_install安装的时候 [root@idayuan ~]# easy_install pycurl Searching for pycurl Best match: pycurl A ...
- 【Ethereum】以太坊ERC20 Token标准完整说明
什么是ERC20 token 市面上出现了大量的用ETH做的代币,他们都遵守REC20协议,那么我们需要知道什么是REC20协议. 概述 token代表数字资产,具有价值,但是并不是都符合特定的规范. ...
- 读取 Excel 之 NPOI
HSSFWorkbook hssfworkbook; void InitializeWorkbook(string path) { //read the template via FileStream ...
- [UE4]C++ string的用法和例子
使用场合: string是C++标准库的一个重要的部分,主要用于字符串处理.可以使用输入输出流方式直接进行操作,也可以通过文件等手段进行操作.同时C++的算法库对string也有着很好的支持,而且st ...
- bravado哺乳内衣适合试穿体验,分享给需要买哺乳内衣的妈妈们。
看来看去还是觉得在美德乐天猫旗舰店(www.bravadobravado.com)购买最保险. 这款内衣穿起来非常舒服,感觉一点都不勒,而且面料也很透气,我生宝宝之前怀孕的时候穿80C,这个本来一开始 ...