设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

使用HTTP上传G级的文件之Node.js版本

2014-11-4 11:34| 发布者: joejoe0332| 查看: 4459| 评论: 0|原作者: LeoXu, 开源中国榨菜, LeoG0816, daxiang, Cath, DYOS|来自: oschina

摘要: 近年来, Javascript越来越流行,这似乎是由于 Javascript 生态系统正在帮助提高生产率、减少入门所需的时间。 在我的 第一篇文章中,我介绍了使用 ASP.NET Web 后端 API 实现 G级文件上传,发表完这篇文章后,我决 ...


  web.config中各项的意思是让iisnode处理所有得*.js文件,由server.js 处理任何匹配"/*"的URL。


图片9 URL重写规则

  如果你正确的做完了所有的工作,你就可以通过http://localhost:8000浏览网站,并进入CelerFT "Default.html"页面。


  web.config文件被修改以支持如前面post中所解释的大文件的上传,这里我不会解释所有的项。不过下面的web.config项可以改善 iisnode中Node.js的性能。

1
<span style="font-family: Consolas; font-size: 9pt;"><iisnode</span><span style="color:


并行上传  

  为了使用域名碎片来实现并行上传,我不得不给Node.js应用做些修改。我第一个要修改的是让Node.js应用支持跨域资源共享。我不得不这样做是因为使用域碎片实际上是让一个请求分到不同的域并且同源策略会限制我的这个请求。


  好消息是XMLttPRequest 标准2规范允许我这么做,如果网站已经把跨域资源共享打开,更好的是我不用为了实现这个而变更在"workeruploadchunk.js"里的上传方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 使用跨域资源共享 // Taken from http://bannockburn.io/2013/09/cross-origin-resource-sharing-cors-with-a-node-js-express-js-and-sencha-touch-app/  
var   enableCORS = function(request,response, next){      
    response.header('Access-Control-Allow-Origin''*');      
    response.header('Access-Control-Allow-Methods''GET,POST,OPTIONS');      
    response.header('Access-Control-Allow-Headers''Content-Type, Authorization, Content-  
                    Length,    X-Requested-With'   )   ;  
  
 
    // 拦截OPTIONS方法
    if ('OPTIONS' ==request.method){      
        response.send(204);      
    }      
    else {      
        next();      
    }      
}   ;        
 
// 在表达式中使用跨域资源共享
app.   use   (   enableCORS   )   ;


  为了使server.js文件中得CORS可用,我创建了一个函数,该函数会创建必要的头以表明Node.js应用支持CORS。另一件事是我还需要表明CORS支持两种请求,他们是:


  • 简单请求:

             1、只用GET,HEAD或POST。如果使用POST向服务器发送数据,那么发送给服务器的HTTP POST请求的Content-Type应是application/x-www-form-urlencoded, multipart/form-data, 或 text/plain其中的一个。

          2、HTTP请求中不要设置自定义的头(例如X-Modified等)

  • 预检请求:

           1、使用GET,HEAD或POST以外的方法。假设使用POST发送请求,那么Content-Type不能是application/x-www-form-urlencoded, multipart/form-data, or text/plain,例如假设POST请求向服务器发送了XML有效载荷使用了application/xml or text/xml,那么这个请求就是预检的。

            2、在请求中设置自定义头(比如请求使用X-PINGOTHER头)。

在我们的例子中,我们用的是简单请求,所以我们不需要做其他得工作以使例子能够工作。


  在  "workeruploadchunk.js" 文件中,我向  self.onmessage 事件添加了对进行并行文件数据块上传的支持.  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// We are going to upload to a backend that supports parallel uploads.  
// Parallel uploads is supported by publishng the web site on different ports  
// The backen must implement CORS for this to work  
else if(workerdata.chunk!= null&& workerdata.paralleluploads ==true){     
    if (urlnumber >= 6) {      
        urlnumber = 0;      
    }      
 
    if (urlcount >= 6) {      
        urlcount = 0;      
    }      
 
    if (urlcount == 0) {      
        uploadurl = workerdata.currentlocation +webapiUrl + urlnumber;      
    }      
    else {      
        // Increment the port numbers, e.g 8000, 8001, 8002, 8003, 8004, 8005  
        uploadurl = workerdata.currentlocation.slice(0, -1) + urlcount +webapiUrl +      
        urlnumber;      
    }      
 
    upload(workerdata.chunk,workerdata.filename,workerdata.chunkCount, uploadurl,      
    workerdata.asyncstate);      
    urlcount++;      
    urlnumber++;  
  }


  在 Default.html 页面我对当前的URL进行了保存,因为我准备把这些信息发送给文件上传的工作程序. 只所以这样做是因为:  

  • 我想要利用这个信息增加端口数量

  • 做了 CORS 请求,我需要把完整的 URL 发送给 XMLHttpRequest 对象.

1
2
3
4
5
6
7
8
<div class="MsoNoSpacing" style="background: #FFFF99;">
<span style="font-family: "Lucida Console"; font-size: 8.0pt;">// Save current protocol and host for parallel uploads</span></div>
<div class="MsoNoSpacing" style="background: #FFFF99;">
"font-family: &apos;Lucida Console&apos;; font-size: 8pt;"><span style="color: #000066;">var</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> currentProtocol </span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">= </span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;">window.</span><span style="color: #660066; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">location</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;">.</span><span style="color: #660066; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">protocol</span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">;</span></div>
<div class="MsoNoSpacing" style="background: #FFFF99;">
"font-family: &apos;Lucida Console&apos;; font-size: 8pt;"><span style="color: #000066;">var</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> currentHostandPort </span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">=</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> window.</span><span style="color: #660066; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">location</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;">.</span><span style="color: #660066; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">host</span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">;</span></div>
<div class="MsoNoSpacing" style="background: #FFFF99;">
"font-family: &apos;Lucida Console&apos;; font-size: 8pt;"><span style="color: #000066;">var</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> currentLocation </span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">= </span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;">currentProtocol </span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">+</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> </span><span style="color: #3366cc; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">"//"</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> </span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">+</span><span style="font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> currentHostandPort</span><span style="color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">;</span></div>
1
2
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">
</span>
1
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">The code below shows the modification made to the upload message.</span><span style="color: #006600; mso-bidi-font-style: italic;"><o:p></o:p></span>
1
2
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">
</span>
1
<span style="background-color: #ffff99; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">// Send and upload message to the webworker</span>
1
"background-color: #ffff99; font-family: &apos;Lucida Console&apos;; font-size: 8pt;"><span style="color: #000066;">case</span><span style="background-color: #ffff99; font-family: &apos;Lucida Console&apos;; font-size: 8pt;"> </span><span style="background-color: #ffff99; color: #3366cc; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">&apos;upload&apos;</span><span style="background-color: #ffff99; color: #339933; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">:</span>
1
<span style="background-color: #ffff99; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">// </span><span style="background-color: #ffff99; font-family: &apos;Lucida Console&apos;; font-size: 8pt;">Check to see if backend supports parallel uploads</span>
1
2
3
4
5
6
7
8
9
10
var paralleluploads =false;  
if ($('#select_parallelupload').prop('checked')) {  
        paralleluploads = true;  
}  
 
uploadworkers[data.id].postMessage({ 'chunk': data.blob, 'filename':data.filename,  
'directory': $("#select_directory").val(), 'chunkCount':data.chunkCount,  
'asyncstate':data.asyncstate,'paralleluploads':paralleluploads, 'currentlocation':  
currentLocation, 'id': data.id });  
break;


  最后修改了 CelerFT 接口来支持并行上传.



  带有并行上传的CelerFT


  这个项目的代码可以再我的 github 资源库上找到


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部