热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于Nodejs的大文件上传之断点续传

接着《扒一扒Nodejsformidable的onPart》和《也说文件上传之兼容IE789的进度条丢掉flash》;前面已完成兼容IE789的大文件上传:无flash的低版本进度

接着《扒一扒Nodejs formidable的onPart》和《也说文件上传之兼容IE789的进度条---丢掉flash》;前面已完成兼容IE789的大文件上传:无flash的低版本进度条,高版本的分段上传,并已为断点续传做好铺垫;

说什么做好铺垫,原本以为Nodejs端已没问题,只剩前端依靠HTML5接着监听abort事件,保存中断时上传到第几块了(断点续传只支持文件比较大,然后意外上传中断了,暂时定50M开启断点续传吧),通过文件内容hash和该文件唯一上传token来记录断点时的信息;下次上传时判断hash和token确定是否需要续传,恩,其实也不难,可还是废了我大半天的时间,死了一大堆脑细胞;看来只是停留在思维阶段是不行的啊,还是得动起来!

按照上面的思路,大致上是没问题的,可在我多方测试,试了一遍又一遍后,始终会存在一个问题:前后端偶尔会衔接不上;比如:后端控制台显示上传完5段,可我abort里监听到的却是上传完4段,有时还会是6段,这种衔接不上的问题折磨了我好半天,而且断点的次数越多,这种情况越多;不得已,最后前后端都做了调整;前天还尼玛说做好铺垫了呢,一行动起来就开始教我做人;

最近一直没机会学Angular,意外的是到处看到关于React的文章和教程,有些不安了,我大Angular的风头在React的强势进击下,越发不及当年勇了吗?VUE也因其轻量而越发受到青睐;其实我对这些前卫的牛逼框架一直处于持续关注和观望状态,因为目前工作的项目偏传统行业,还得跟IE789这些老奇葩打交道,所以只是关注和简单的试水;最近对React多了些躁动,估计把大文件上传确定一个版本后,会系统的重新开始学学React了;

不扯远了,今天算是被断点续传教做人了,不过还是打算趁放假,稍作整理,简单的分享下;

鉴于上面的BUG,现在改换思路了,不在abort里监听了,衔接不上的问题是致命的;怎么办呢:上传之前判断文件是否超过50M,如果大于50M就读取文件内容的MD5,然后读取本地是否保存有该MD5值,如果有就将文件的token设置为保存对应md5的token,如果没有对应的md5值,就增加一条记录:包括文件的MD5,是否上传完毕的状态,文件的token,多文件时对应的index;这样,文件一开始上传就将信息保存(或更新)于本地,文件上传完毕时通过回调再将对应信息清除,下次上传判断到该值还在的话,那么就是续传了;是的,本地没有保存已上传完毕的分段索引值,因为之前出现的前后端衔接不上的问题,现在只好做了调整,由后端在写入文件内容后,将索引值保存(或更新),前端如果判断为续传,就再请求到续传的索引值,然后可以开始续传了;结果证明这样是可行的,事实胜于雄辩,少废话了,上代码(将就看吧):

 1 postFiles:function(){
 2   var $self=this;
 3   if (this.files.size>50*1024*1024) {
 4 
 5     var fileReader = new FileReader(),spark = new SparkMD5.ArrayBuffer();
 6     fileReader.Onload= function (e) {
 7           spark.append(e.target.result);   
 8           $self.hash=spark.end();    
 9           window.__hash__=$self.hash;       
10           var stored=localStorage.getItem(‘fileUploadInfos‘);
11           var odata=utils.url.query.other_data,
12                 ins=0;
13               if (odata) {
14                 ins=JSON.parse(odata).index;
15               }
16           if (stored&&JSON.parse(stored).length) {
17             var c=0,tk=0;
18             JSON.parse(stored).forEach(function(sd){
19               if (odata) {
20                 if (sd&&sd.hash==$self.hash&&ins==sd.ins) {
21                   tk=sd.__token;  
22                   c++;
23                 }
24               }else{
25                 if (sd&&sd.hash==$self.hash) {
26                   tk=sd.__token;  
27                   c++;
28                 }
29               }
30             });
31             if (c) {
32               var _data={
33                 token:tk,
34                 getfileinfo:1
35               }
36               if (odata) {
37                 _data.ins=ins;
38               };
39               $.post(‘/components/uploader‘,_data).then(function(data){
40                 if (data.mes==1) {
41                   $self.index=data.index*1+1;
42                 }
43                 $self.__token__=tk;
44                 $self.postSlice();
45               });
46             }else{
47               var willload={
48                 __token:$self.__token__,
49                 status:‘will‘,
50                 hash:$self.hash
51               }
52               if (odata) {
53                 willload.ins=ins;
54               };
55               var lodd=JSON.parse(stored);
56               lodd.push(willload);
57               localStorage.setItem(‘fileUploadInfos‘,JSON.stringify(lodd));
58               $self.postSlice();
59             };
60           }else{
61             var willload={
62               __token:$self.__token__,
63               status:‘will‘,
64               hash:$self.hash
65             }
66             if (odata) {
67               willload.ins=ins;
68             };
69             localStorage.setItem(‘fileUploadInfos‘,JSON.stringify([willload]));
70             $self.postSlice();
71           }
72       };
73     fileReader.readAsArrayBuffer(this.files.slice(0, 10240));
74   }else{
75     this.postSlice();
76   };
77 }

这里用的是sparkMD5.js来读取的文件内容的MD5,而且你可以通过slice(s,e);来指定从哪开始读,以及读多少,由于大文件要读取全部内容的MD5,可是很耗时间的哦,大家可以试试看,很有意思,所以还是slice吧!详细使用github去吧!跟之前铺垫说的不一样的地方就是多了请求$.post(‘/components/uploader‘,_data);然后就是由回调看是否上传成功来确定是否清除上传前保存的相关信息;

 1 window.callback=function(data){
 2   if (localStorage) {
 3     var odata=utils.url.query.other_data,
 4         ins=0;
 5       if (odata) {
 6         ins=JSON.parse(odata).index;
 7       }
 8     var storedInfo=localStorage.getItem(‘fileUploadInfos‘);
 9     var _hash=location.hash;
10     if (window.__hash__) {
11       storedInfo=JSON.parse(storedInfo);
12       for(var i=0;i){
13         if (odata) {
14           if (storedInfo[i].hash==window.__hash__&&ins==storedInfo[i].ins) {
15             storedInfo.splice(i);
16           }
17         }else{
18           if (storedInfo[i].hash==window.__hash__) {
19             storedInfo.splice(i);
20           }
21         }
22       }
23       localStorage.removeItem(‘fileUploadInfos‘);
24       localStorage.setItem(‘fileUploadInfos‘,JSON.stringify(storedInfo));
25     }
26   }
27   //......
28   //...
29 }

保存值里有个index,来自url的可选other_data,这个值是为了扩展,如果以后使用时发现要额外增加其他值,或者回调其他值,或多个iframe上传,来区分不同的上传,只需往other_data里加值就OK,他是一个JSON格式的值,你懂的,重要的是多个iframe也可以通过other_data共享一个callback;

为了保证断点续传不是不断的增加新文件,多个上传,哪怕是同一个文件也不重名,问题还蛮多的,当然这种问题也很严重,所以不能想的太简单;不光要判断文件内容的MD5,还要判断token,由于每次重传token就刷新了,所以记得要重置token,还要判断多个iframe上传怎么区分;

技术分享

如图,比较犯贱的测法:因为这个上传是使用的iframe,作为一个页面单独管理;多个iframe上传同一个大文件,还同时支持断点续传;

不知道我有没有分享清楚,同学们有什么做法欢迎与我分享;

最后,就差完善大文件上传的细节了,如果可以的话,还可以把HTML5的拖拽拉进来;既然作为独立页面管理,对于静态资源来说,以后很可能还要涉及到跨域问题;持续跟进中。。。。。。。。。。。技术分享

 

 原文来自:花满楼(http://www.famanoder.com/bokes/575ace3880e446c026079232)

 

基于Nodejs的大文件上传之断点续传


推荐阅读
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • Manacher算法详解:寻找最长回文子串
    本文将详细介绍Manacher算法,该算法用于高效地找到字符串中的最长回文子串。通过在字符间插入特殊符号,Manacher算法能够同时处理奇数和偶数长度的回文子串问题。 ... [详细]
  • malloc 是 C 语言中的一个标准库函数,全称为 memory allocation,即动态内存分配。它用于在程序运行时申请一块指定大小的连续内存区域,并返回该区域的起始地址。当无法预先确定内存的具体位置时,可以通过 malloc 动态分配内存。 ... [详细]
  • 本文详细介绍了Linux系统中用于管理IPC(Inter-Process Communication)资源的两个重要命令:ipcs和ipcrm。通过这些命令,用户可以查看和删除系统中的消息队列、共享内存和信号量。 ... [详细]
  • A*算法在AI路径规划中的应用
    路径规划算法用于在地图上找到从起点到终点的最佳路径,特别是在存在障碍物的情况下。A*算法是一种高效且广泛使用的路径规划算法,适用于静态和动态环境。 ... [详细]
  • MySQL 数据库连接方法
    本文介绍了如何使用 MySQL 命令行工具连接到指定的数据库。 ... [详细]
  • [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
  • ZooKeeper 入门指南
    本文将详细介绍ZooKeeper的工作机制、特点、数据结构以及常见的应用场景,包括统一命名服务、统一配置管理、统一集群管理、服务器动态上下线和软负载均衡。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 本文详细介绍了如何解决DNS服务器配置转发无法解析的问题,包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]
  • 数字资产量化交易通过大数据分析,以客观的方式制定交易决策,有效减少人为的主观判断和情绪影响。本文介绍了几种常见的数字资产量化交易策略,包括搬砖套利和趋势交易,并探讨了量化交易软件的开发前景。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
author-avatar
上午劳动_951
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有