扒一扒Nodejs formidable的onPart

话说使用Nodejs实现一个文件上传，还是蛮简单的，基于Express4.x一般也就formidable用的多些吧；基本的不多说了，github一下都会的；接着《也说文件上传之兼容IE789的进度条---丢掉flash》，新版的大文件上传，最后就差断点续传了，业余跟进中...；对于IE789，在文件上传这块，算是与HTML5无缘了，当然我也选择丢掉了flash，就用最原始的input[type="file"]+hideIframe+轮询；OK，IE789可以凉快去了，BSIE！

那么，现代浏览器上就不一样了；大家都知道用HTML5上传大文件必然会选择分段，files API的file.slice(start,end)+formData；简单的将就看吧：

 1 var uploader=function{
 2 
 3   //....
 4 
 5   function Files(obj){
 6     this.files=obj.files;
 7     this.__token__=utils.getRandomStr;
 8     this.url=obj.url||location.href;
 9     this.chunkSize=obj.chunkSize||200*1024;
10     this.chunks=Math.ceil(this.files.size/this.chunkSize);
11     this.index=0;
12     this.onprogress=obj.onprogress||function(p){console.log(p);};
13   }
14   Files.prototype={
15     postFiles:function{
16       var $self=this;
17       //大于50M 断点续传
18       if (this.files.size>50*1024*1024) {
19         var fileReader = new FileReader,spark = new SparkMD5.ArrayBuffer;
20         fileReader.onload = function (e) {
21  spark.append(e.target.result);   
22 $self.hash=spark.end;   
23 window.__hash__=$self.hash;       
24 var stored=localStorage.getItem('fileUploadInfos');
25 //断点信息
26  $self.postSlice;
27  };
28         fileReader.readAsArrayBuffer(this.files.slice(0, 10240));
29       }else{
30         this.postSlice;
31       };
32     },
33     postSlice:function{
34       var $self=this;
35       if (this.index>=this.chunks) {
36         return false;
37       };
38       this.start=this.index*this.chunkSize;
39       this.end=Math.min(this.files.size,this.start+this.chunkSize);
40 
41       var self=this;
42       var fd = new FormData;
43       fd.append("sliceData", this.files.slice(this.start,this.end));
44       this.url=//url datas
45       var xhr = new XMLHttpRequest;
46       xhr.upload.addEventListener("progress", function(evt){
47         if (evt.lengthComputable) {
48 var led=self.index*self.chunkSize*1+evt.loaded*1;
49 var p=parseFloat((led)/self.files.size*100).toFixed(2);
50 self.onprogress&&self.onprogress(p);
51         }else {
52 console.log('unable to compute');
53         }
54       }, false);
55       xhr.addEventListener("load", function{
56         self.index++;
57         self.postSlice;
58         eval(xhr.responseText);
59       }, false);
60       xhr.open("POST", this.url);
61       // xhr.addEventListener("error", uploadFailed, false);
62       xhr.addEventListener("abort", function  {
63         //记录断点信息
64       }, false);
65       xhr.send(fd);
66     }
67   }
68 
69   return {
70     Files:Files
71     //.....
72   }
73 };
74 
75 if (this.files) {
76   var Files=new uploader.Files({
77     files:this.files[0],
78     chunkSize:10*1024*1024,
79     onprogress:function(p){
80       callbk(p);
81     }
82   });
83   Files.postFiles;
84 }

好吧，其实大家都懂，我就不多BB了；还是说formidable吧，既然用到分段上传，formidable的一般做法肯定是行不通的；不过github上人家也说了，onPart或许可以。。。。。。原谅我英语有点low，一知半解；原文这样的：

You may overwrite this method if you are interested in directly accessing the multipart stream. Doing so will disable any'field'/'file'events processing which would occur otherwise, making you fully responsible for handling the processing.
form.onPart = function(part) { part.addListener('data', function { // ... }); }
If you want to use formidable to only handle certain parts for you, you can do so:
form.onPart = function(part) { if (!part.filename) { // let formidable handle all non-file parts form.handlePart(part); } }

也就是我们需要使用onPart来分段接收前端发过来的数据，然后合成一个文件，生成到指定目录；

当使用formData上传时，在request headers里我们会看到有项request payload，也就是我们发送过去的数据，这是未解析的原始数据；那么，难道我们还要自己解析吗？不会玩了。。。

扒一扒formidable的源代码，会发现有好几个_parser结尾的js文件；再看incoming_form.js里有这么一段：

 1 IncomingForm.prototype._parseContentType = function {
 2   if (this.bytesExpected === 0) {
 3     this._parser = dummyParser(this);
 4     return;
 5   }
 6 
 7   if (!this.headers['content-type']) {
 8     this._error(new Error('bad content-type header, no content-type'));
 9     return;
10   }
11 
12   if (this.headers['content-type'].match(/octet-stream/i)) {
13     this._initOctetStream;
14     return;
15   }
16 
17   if (this.headers['content-type'].match(/urlencoded/i)) {
18     this._initUrlencoded;
19     return;
20   }
21 
22   if (this.headers['content-type'].match(/multipart/i)) {
23     var m = this.headers['content-type'].match(/boundary=(?:"([^"]+)"|([^;]+))/i);
24     if (m) {
25       this._initMultipart(m[1] || m[2]);
26     } else {
27       this._error(new Error('bad content-type header, no multipart boundary'));
28     }
29     return;
30   }
31 
32   if (this.headers['content-type'].match(/json/i)) {
33     this._initJSONencoded;
34     return;
35   }
36 
37   this._error(new Error('bad content-type header, unknown content-type: '+this.headers['content-type']));
38 };

这几条if很是让人欣喜啊，有木有？特别是看到这句：

this.headers['content-type'].match(/boundary=(?:"([^"]+)"|([^;]+))/i);

这不是在解决咱在request headers里看到的request payload吗？终于在心中大喜，咱不用自己解析那堆数据了；接着往下看：

 1 IncomingForm.prototype.onPart = function(part) {
 2   // this method can be overwritten by the user
 3   this.handlePart(part);
 4 };
 5 
 6 IncomingForm.prototype.handlePart = function(part) {
 7   var self = this;
 8 
 9   if (part.filename === undefined) {
10     var value = ''
11       , decoder = new StringDecoder(this.encoding);
12 
13     part.on('data', function(buffer) {
14       self._fieldsSize += buffer.length;
15       if (self._fieldsSize > self.maxFieldsSize) {
16         self._error(new Error('maxFieldsSize exceeded, received '+self._fieldsSize+' bytes of field data'));
17         return;
18       }
19       value += decoder.write(buffer);
20     });
21 
22     part.on('end', function {
23       self.emit('field', part.name, value);
24     });
25     return;
26   }
27 
28   this._flushing++;
29 
30   var file = new File({
31     path: this._uploadPath(part.filename),
32     name: part.filename,
33     type: part.mime,
34     hash: self.hash
35   });
36 
37   this.emit('fileBegin', part.name, file);
38 
39   file.open;
40   this.openedFiles.push(file);
41 
42   part.on('data', function(buffer) {
43     if (buffer.length == 0) {
44       return;
45     }
46     self.pause;
47     file.write(buffer, function {
48       self.resume;
49     });
50   });
51 
52   part.on('end', function {
53     file.end(function {
54       self._flushing--;
55       self.emit('file', part.name, file);
56       self._maybeEnd;
57     });
58   });
59 };

至此，终于明白作者的话了；自己处理上传的数据，是在handlePart中通过part.on('data')和part.on('end')来收集分段数据，然后生成文件的；那么使用分段上传的话，我们就需要在Nodejs里重写form.handlePart了；

 1 form.handlePart=function(part) {
 2   var dd=,ll=0;
 3   part.on('data', function(data) {
 4     if (data.length == 0) {
 5       return;
 6     }
 7     dd.push(data);
 8     ll+=data.length;
 9   });
10 
11   part.on('end', function {  
12       var p='./public/imgs/'+uploadToken+'_'+req.query.name;
13       fs.open(p, 'a', function (err, fd) {
14         if (err) {
15 throw err;
16         }
17         fs.write(fd, Buffer.concat(dd,ll),0, ll,0,function{
18 if (req.query.chunks==req.query.index*1+1) {
19  res.write(bk);
20  }
21 fs.close(fd,function{});
22  res.end;
23  });
24       }); 
25     } 
26   });
27 }

拿到data后生成文件并不难，fs.writeFile、stream都可以的；原谅我初入Nodejs，怎么感觉最后一步的写入文件，这两种方式都特慢呢？不能忍啊，再探！

试来试去，最后还是选择在接收到第一段数据时就生成文件，之后接收到的数据直接push进去；即上面的fs.write(fd,buffer,offset,length,position,cb)；话说明显快了不少呢！

而且，意外的收获是：想一想接下来还要实现断点续传呢！想一想，貌似这样做，基本等于Nodejs端的断点续传已经实现了呢；前端记录断点的位置，下次上传时从断点位置开始，然后直接push到这个没上传完的文件里；

到这里，Nodejs端的分段接收文件就可以的了，而且还为之后的断点续传做了个很好的铺垫呢；

好了，对于大文件上传，formidable能做的差不多就这么多了，onPart是必须的；如果大家伙有什么更好的方法，欢迎与我分享！简单的记录，与君共勉，谢谢你能看到这儿！

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?