热门标签 | 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的大文件上传之断点续传


推荐阅读
  • 本文将从基础概念入手,详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发,以及其背后的源码实现细节。 ... [详细]
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • 本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件(model.py)。此方法适用于需要快速搭建项目模型层的情况。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 项目风险管理策略与实践
    本文探讨了项目风险管理的关键环节,包括风险管理规划、风险识别、风险分析(定性和定量)、风险应对策略规划及风险控制。旨在通过系统的方法提升项目成功率,减少不确定因素对项目的影响。 ... [详细]
  • 探索AI智能机器人自动盈利系统的构建
    用户可通过支付198元押金及30元设备维护费租赁AI智能机器人,推荐他人加入可获得相应佣金。随着推荐人数的增加,用户将逐步解锁更高版本,享受更多收益。 ... [详细]
  • Windows操作系统提供了Encrypting File System (EFS)作为内置的数据加密工具,特别适用于对NTFS分区上的文件和文件夹进行加密处理。本文将详细介绍如何使用EFS加密文件夹,以及加密过程中的注意事项。 ... [详细]
  • 回顾两年前春节期间的一个个人项目,该项目原本计划参加竞赛,但最终作为练习项目完成。独自完成了从编码到UI设计的全部工作,尽管代码量不大,但仍有一定的参考价值。本文将详细介绍该项目的背景、功能及技术实现。 ... [详细]
  • 如何在PHP中安装Xdebug扩展
    本文介绍了如何从PECL下载并编译安装Xdebug扩展,以及如何配置PHP和PHPStorm以启用调试功能。 ... [详细]
  • 本文探讨了在一个物理隔离的环境中构建数据交换平台所面临的挑战,包括但不限于数据加密、传输监控及确保文件交换的安全性和可靠性。同时,作者结合自身项目经验,分享了项目规划、实施过程中的关键决策及其背后的思考。 ... [详细]
  • importjava.io.*;importjava.util.*;publicclass五子棋游戏{staticintm1;staticintn1;staticfinalintS ... [详细]
  • 解决Visual Studio Code中PHP Intelephense误报问题
    PHP作为一种高度灵活的编程语言,其代码结构可能导致Intelephense插件在某些情况下报告不必要的错误或警告。自1.3.3版本起,Intelephense引入了多个配置选项,允许用户根据具体的工作环境和编程风格调整这些诊断信息的显示。 ... [详细]
  • 心理学经典:《思考致富》
    《思考致富》是由美国著名成功学大师拿破仑·希尔撰写的一部重要著作,该书基于希尔长达20年的深入研究和访谈,探讨了个人成功的核心要素。书中不仅揭示了成功的关键,还提供了一系列实用的方法和策略。 ... [详细]
  • 本文将详细介绍如何在二进制和十六进制之间进行准确的转换,并提供实际的代码示例来帮助理解这一过程。 ... [详细]
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社区 版权所有