Node.js教程 基于Node.js的大文件上传之断点续传
沉沙 2018-10-09 来源 : 阅读 1886 评论 0

摘要:本篇教程介绍了Node.js教程 基于Node.js的大文件上传之断点续传,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程 基于Node.js的大文件上传之断点续传,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

<

上代码(将就看吧):

 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<storedInfo.length;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上传同一个大文件,还同时支持断点续传    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注WEB前端Node.js频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程