最近开始研究http 特别是multipart 表单,想弄明白他是怎么work 的。在nodejs 里,可以使用form-data 来组合一个multipart 表单,然后使用http.request 发送出去
var formData = require('form-data');
var http = require('http');
var urlParse = require('url').parse;
var fs = require('fs'); f = new formData();
f.append('image', fs.createReadStream('./test.jpg')); var options = urlParse(url);
options.method = 'post';
options.headers = f.getHeaders(); var req = http.request(options);
f.pipe(req);
在服务端就可以接受到post 过去的表单内容(node 可以使用multiparty 中间件)
form-data 之所以能pipe 到req,说明他至少是一个Readable stream, 查看代码后发现他继承于combine-stream。继续查看combine-stream 发现这是一个duplex stream,功能是接受多个readable stream 把他们串起来然后合并成一个readable stream。很有意思。
了解了combine-stream 是干什么用的以后,再了解一下multipart 表单是怎么组成的 发现其于其它表单的区别在于
- header 里的Content-Type。
- body 里的内容由定义的boundary 分隔。
最后发现,用combine-stream 来组装multipart 表单是一个很好的选择。因为stream 是资源的抽象,目的是为了在速度和系统资源占用之间做个取舍(想象一下如果没有stream,发送任何文件需要把整个文件放进内存;资源还没完全生产的情况,比如直播,没有流的抽象就没法实现)
http 的req 就是一个writeable stream(res 也一样),所有请求内容都可以通过req.write(或者res.write) 发送过去。具体后面是怎么发送的,是用socket?然后再tcp?则不用关心,stream 这层抽象屏蔽了underlying system。我们只用关心从readable stream 读,往writeable stream 里面写就可以了。
所以在发送multipart 表单的时候,我们只用:
- 往req 里写header,注意特殊的Content-Type。
- 往req 里pipe 文件流。
- 往req 里写boundray 分隔符。
- 重复2,3步。直到完成所有文件发送。
- 往req 里写尾信息。
可以发现在2,3两步就涉及很多文件流,比如上传多张图片到服务器,那么我们就要往req 里pipe 第一个文件(然后加上boundray)等待其结束后再接着pipe 下一张图片的流。这样重复多次非常麻烦。不如把所有这些流串在一起,合并成一整个流,这样把流之间切换的重复逻辑包装起来,既不容易出错也更简洁易理解。
CombineStream 要怎么实现呢。刚才了解到了,CombineStream 的逻辑不过是把一串readable stream 按顺序串起来,一个流结束了马上换另一个,直到所有添加的流都结束为止。那么首先CombineStream 必须是duplex 的。node 里的transform stream 就是最佳人选。
var Transform = require('stream').Transform;
var util = require('util');
var assert = require('assert');
var fs = require('fs'); function CombineStream(options) {
Transform.call(this, options); this._streams = [];
this._currentStream = null; this._prepare = function(){
var stream = this._currentStream = this._streams.shift();
if (stream) {
if (typeof stream === 'string') {
this.push(stream);
this._prepare();
return;
}
stream.pipe(this, {end: false});
stream.on('end', function(){
this._prepare();
}.bind(this));
stream.on('error', function(err){
console.error(err);
});
} else {
this.end();
}
};
}
util.inherits(CombineStream, Transform); CombineStream.prototype.append = function(stream) {
this._streams.push(stream);
} CombineStream.prototype._transform = function(chunk, encoding, callback) {
callback(null ,chunk);
} CombineStream.prototype.pipe = function(dest, options) {
this._prepare();
Transform.prototype.pipe.call(this, dest, options);
} module.exports = CombineStream;
这样就实现了一个简单的CombineStream。只加了很少代码:append 方法添加流,这里对string 做了适配;_prepare 这个私有方法用来实现流切换的逻辑。
然后就可以试试用CombineStream来构造一个multipart表单然后发送。
var cs = new CombineStream();
cs.append('-----------------------------287032381131322\r\nContent-Disposition: form-data; name="image"; filename="test.jpg"\r\nContent-Type: image/jpg\r\n\r\n');
cs.append(gmStream);
cs.append('\r\n-----------------------------287032381131322--'); var options = urlParse(url);
options.method = 'post';
options.headers = {
'keep-alive': 300,
'content-type':'multipart/form-data; boundary=---------------------------287032381131322',
'Transfer-Encoding': 'chunked'
}; var req = http.request(options);
cs.pipe(req); req.on('error', function(err){
console.error(err);
});
req.on('response', function(res) {
//deal res here.
});
这里我hardcode 了分隔信息和尾信息,中间有很多\r\n 可以看出没有系统的处理方法的话很容易出错。这样如果在server 端使用multiparty 中间件来解析表单的话可以得到正确的文件上传内容。
{ image:
[ { fieldName: 'image',
originalFilename: 'test.jpg',
path: '/var/folders/02/pwvm1df51nsfvg373jf8ksg00000gn/T/hwM6h-88fqiemXyna1Hd09eK.jpg',
headers: [Object],
size: 10988 } ] }
Conclusion:
可见form-data 模块基本就是这么工作的。