node请求php文件上传,nodejs-http 对form表单上传文件数据的解析过程

前几天碰到了一个需求，允许接收前端用户上传的文件。

当时为了解决问题索性就上github搜了下，找了一个基于nodejs的开发插件。

后来功能实现后觉得意犹未尽，于是自己想试试去写一个类似功能的插件，方便以后拓展，然后就这么开始了。

先来说说应用层的http，数据从前端是怎么被它包装然后传到服务器的。

我们可以在浏览器中查看我们发一个请求的时候包什么格式的，例如我们访问百度时得到的请求包内容：

Remote Address:180.97.33.107:443

Request URL:https://www.baidu.com/

Request Method:GET

Status Code:200 OK

Request Headers

:host:www.baidu.com

:method:GET

:path:/

:scheme:https

:version:HTTP/1.1

accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

accept-encoding:gzip, deflate, sdch

accept-language:zh-CN,zh;q=0.8,en;q=0.6

cookie:BAIDUPSID=9193988659A757F51540F21C3A7DF43B; locale=zh;

referer:http://baidu.com/

user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36

Response Headers

bdpagetype:2

bdqid:0x9ca30ab3000c253d

bduserid:1618160418

cache-control:private

content-encoding:gzip

content-type:text/html

date:Sat, 04 Apr 2015 07:42:42 GMT

expires:Sat, 04 Apr 2015 07:42:42 GMT

server:bfe/1.0.8.1

set-cookie:BDSVRTM=124; path=/

set-cookie:BD_HOME=1; path=/

set-cookie:H_PS_PSSID=11193_1450_13074_10901_12867_13322_12691_13348_12723_12797_12737_13355_13324_13210_13162_13257_13031_8498; path=/; domain=.baidu.com

set-cookie:__bsi=18001627764121693250_31_38_R_N_124_0303_C02F_Y_I_I; expires=Sat, 04-Apr-15 07:42:47 GMT; domain=www.baidu.com; path=/

status:200 OK

version:HTTP/1.1

相同的，服务器在接收到前端发来的请求时，经过一些逻辑处理，也会对前端发送一个数据包，包头格式如下：

bdpagetype:2

bdqid:0x9ca30ab3000c253d

bduserid:1618160418

cache-control:private

content-encoding:gzip

content-type:text/html

date:Sat, 04 Apr 2015 07:42:42 GMT

expires:Sat, 04 Apr 2015 07:42:42 GMT

server:bfe/1.0.8.1

set-cookie:BDSVRTM=124; path=/

set-cookie:BD_HOME=1; path=/

set-cookie:H_PS_PSSID=11193_1450_13074_10901_12867_13322_12691_13348_12723_12797_12737_13355_13324_13210_13162_13257_13031_8498; path=/; domain=.baidu.com

set-cookie:__bsi=18001627764121693250_31_38_R_N_124_0303_C02F_Y_I_I; expires=Sat, 04-Apr-15 07:42:47 GMT; domain=www.baidu.com; path=/

status:200 OK

version:HTTP/1.1

那么数据包的核心就是服务器返回给客户端的内容，也就是包体，一般情况下，我们在写代码与客户端交互式不会去单独处理包头的内容(由http底层处理，淡然也可以人工干涉)，我们只关心返回给前端什么样的数据也就是包体。

下面我们直接说说常用的post方法，如果你写过一点PHP，那么你肯定记得，在PHP里面，进行文件上传的时候，我们可以直接使用全局变量 $_FILE[‘name’ ]来获取已经被临时存储的文件信息。

但是实际上，POST数据实体，会根据数据量的大小进行分包传送，然后再从这些数据包里面分析出哪些是文件的元数据，那些是文件本身的数据。

PHP是底层做了封装，但是在nodejs里面，这个看似常见的功能却是需要自己来实现的。这篇文章主要就是介绍如何使用nodejs来解析post数据。

简单的说就是我们通过nodejs的http模块得到的文件上传数据是一个半成品，我们需要对数据进行拆分，找到那些是包头，哪些是包体。如果对接收到的数据直接进行拼接，那么结果就变成了这样子。

包头，包体都在一起。

关于content-type

get请求的headers中没有content-type这个字段post 的 content-type 有两种

application/x-www-form-urlencoded

这种就是一般的文本表单用post传地数据，只要将得到的data用querystring解析下就可以了

multipart/form-data

文件表单的传输，也是本文介绍的重点

获取POST数据

前面已经说过，post数据的传输是可能分包的，因此必然是异步的。post数据的接受过程如下：

var postData = ‘‘;

request.addListener("data", function(postDataChunk) { // 有新的数据包到达就执行

postData += postDataChunk;

console.log("Received POST data chunk ‘"+

postDataChunk + "‘.");

});

request.addListener("end", function() { // 数据传输完毕

console.log(‘post data finish receiving: ‘ + postData );

});

注意，对于非文件post数据，上面以字符串接收是没问题的，但其实 postDataChunk 是一个 buffer 类型数据，在遇到二进制时，这样的接受方式存在问题。

POST数据的解析(multipart/form-data)

在解析POST数据之前，先介绍一下post数据的格式：

multipart/form-data类型的post数据

例如我们有表单如下

enctype="multipart/form-data"

method="post">

What is your name?

What files are you sending?

若用户在text字段中输入‘Neekey’，并且在file字段中选择文件‘text.txt’,那么服务器端收到的post数据如下：

--AaB03x

Content-Disposition: form-data; name="submit-name"

Neekey

--AaB03x

Content-Disposition: form-data; name="files"; filename="file1.txt"

Content-Type: text/plain

... contents of file1.txt ...

--AaB03x--

若file字段为空：

--AaB03x

Content-Disposition: form-data; name="submit-name"

Neekey

--AaB03x

Content-Disposition: form-data; name="files"; filename=""

Content-Type: text/plain

--AaB03x--

若将file 的 input修改为可以多个文件一起上传：

enctype="multipart/form-data"

method="post">

What is your name?

What files are you sending?

那么在text中输入‘Neekey’,并在file字段中选中两个文件’a.jpg’和’b.jpg’后：

--AaB03x

Content-Disposition: form-data; name="submit-name"

Neekey

--AaB03x

Content-Disposition: form-data; name="files"; filename="a.jpg"

Content-Type: image/jpeg

/* data of a.jpg */

--AaB03x

Content-Disposition: form-data; name="files"; filename="b.jpg"

Content-Type: image/jpeg

/* data of b.jpg */

--AaB03x--// 可以发现 两个文件数据部分，他们的name值是一样的

数据规则

简单总结下post数据的规则

1.不同字段数据之间以边界字符串分隔：

--boundary\r\n // 注意，如上面的headers的例子，分割字符串应该是 ------WebKitFormBoundaryuP1WvwP2LyvHpNCi\r\n

2.每一行数据用”CR LF”(\r\n)分隔

3.数据以 边界分割符 后面加上 –结尾，如：

------WebKitFormBoundaryuP1WvwP2LyvHpNCi--\r\n

4.每个字段数据的header信息(content-disposition/content-type)和字段数据以一个空行分隔：\r\n\r\n

关于form具体的内容可以看下W3C的文档：W3C

If the user selected a second (image) file "file2.gif", the user agent might construct the parts as follows:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x

Content-Disposition: form-data; name="submit-name"

Larry

--AaB03x

Content-Disposition: form-data; name="files"

Content-Type: multipart/mixed; boundary=BbC04y

--BbC04y

Content-Disposition: file; filename="file1.txt"

Content-Type: text/plain

... contents of file1.txt ...

--BbC04y

Content-Disposition: file; filename="file2.gif"

Content-Type: image/gif

Content-Transfer-Encoding: binary

...contents of file2.gif...

--BbC04y--

--AaB03x--

数据解析基本思路

必须使用buffer来进行post数据的解析

利用文章一开始的方法(data += chunk， data为字符串 )，可以利用字符串的操作，轻易地解析出各自端的信息，但是这样有两个问题：

文件的写入需要buffer类型的数据

二进制buffer转化为string，并做字符串操作后，起索引和字符串是不一致的(若原始数据就是字符串，一致)，因此是先将不总的buffer数据的toString()复制给一个字符串，再利用字符串解析出个数据的start，end位置这样的方案也是不可取的。

利用边界字符串来分割各字段数据

每个字段数据中，使用空行(\r\n\r\n)来分割字段信息和字段数据

所有的数据都是以\r\n分割

利用上面的方法，我们以某种方式确定了数据在buffer中的start和end，利用buffer.splice( start, end ) 便可以进行文件写入了.

其实github上有一个很不错的开源插件，有兴趣可以去看一下:node-formidable