<form action=\"大众http://www.qq.com/\"大众 method=\"大众post\"大众>\r <input type=\"大众text\"大众 name=\"大众text1\"大众 /><br />\r <input type=\"大众text\公众 name=\"大众text2\"大众 /><br />\r <input type=\"大众submit\"大众 />\r</form>
提交时, 用fiddler 抓包可以看到向做事端发出这样的数据:
POST http://www.qq.com/ HTTP/1.1\rHost: www.qq.com\rContent-Length: 23\rContent-Type: application/x-www-form-urlencoded; charset=UTF-8\r\rtext1=hello&text2=world
值得把稳的是Content-Type默认为application/x-www-form-urlencoded,以是会经由URL编码。比如你好会编码为 %E4%BD%A0%E5%A5%BD。
接下来我们看一下通过form 表单是怎么上传的。大家该当也不陌生:

<form action=\"大众http://www.qq.com\公众 method=\"大众post\"大众 enctype=\"大众multipart/form-data\公众>\r <input type=\"大众file\"大众 name=\"大众myfile\"大众 />\r <input type=\公众submit\公众 value=\"大众submit\公众 />\r</form>
然后新建一个只有hello world字样的upload.txt文本文件上传上去,我们再吃用fiddler 来抓下包, 可以创造发送过去的数据轻微繁芜了一些(已经去掉了很多的其它没紧要的要求行,比如缓存掌握和cookie之类的):
POST http://www.qq.com/ HTTP/1.1\rHost: www.qq.com\rContent-Length: 199\rContent-Type: multipart/form-data; boundary=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G\r\r------WebKitFormBoundarywr3X7sXBYQQ4ZF5G\rContent-Disposition: form-data; name=\"大众myfile\"大众; filename=\公众upload.txt\"大众\rContent-Type: text/plain\r\rhello world\r\r------WebKitFormBoundarywr3X7sXBYQQ4ZF5G--
根据RFC 1867的定义,我们须要天生一段边界数据,这个数据不能在内容的其它地方涌现,这个可以自己定义, 在每个浏览器的天生算法可能都不一样, 上面的boundary便是分隔数据,天生了分隔数据之后, 就可以把分隔数据放在头部的Content-Type里面传送给做事端, 也便是上文的 Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G, 其余,上传的内容,须要用分隔数据来分隔成多少个段,然后每段数据里面都有文件的文件名,还有上传时候的name,做事端便是用这个name来吸收文件,还有文件的类型Content-Type,在这个例子里是 text/plain,如果上传的是png图片便是image/png。文件类型的一个空行后便是所上传的文件的内容,在这个例子里也是为了随意马虎理解以是上传的是文本文件以是内容直接就能够显示出来,如果上传的是图片文件, 由于是二进制文件,fiddler 就显示的是乱码。 文件的内容结束之后便是一个空行再加上边界数据。
理解了发送格式的细节之后, 下一步便是利用nodejs来编程实现,大略来讲, 便是按照格式把数据发送给做事端就行了。
const http = require('http');\rconst fs = require('fs');\r\r//post地址为本地做事的一个php,用于测试上传是否成功\rvar options = {\r hostname: 'localhost',\r port: 80,\r path: '/get.php',\r method: 'POST'\r}\r\r//天生分隔数据\rvar boundaryKey = '----WebKitFormBoundaryjLVkbqXtIi0YGpaB'; \r\r//读取须要上传的文件内容\rfs.readFile('./upload.txt', function (err, data) {\r //拼装分隔数据段\r var payload = '--' + boundaryKey + '\r\n' + 'Content-Disposition:form-data; name=\"大众myfile\"大众; filename=\公众upload.txt\"大众\r\n' + 'Content-Type:text/plain\r\n\r\n';\r payload += data;\r payload += '\r\n--' + boundaryKey + '--';\r \r //发送要求\r var req = http.request(options, function (res) {\r res.setEncoding('utf8');\r res.on('data', function (chunk) {\r console.log('body:' + chunk);\r });\r\r });\r \r req.on('error', function(e) {\r console.error(\公众error:\"大众+e);\r });\r //把boundary、要发送的数据大小以及数据本身写进要求\r req.setHeader('Content-Type', 'multipart/form-data; boundary='+boundaryKey+'');\r req.setHeader('Content-Length', Buffer.byteLength(payload, 'utf8'));\r req.write(payload);\r req.end;\r});
本文重点在于理解协议并且用代码实现出来, 代码组织上面还有很多优化的地方。
末了在本地apache,大略写一个php来保存上传的文件来用作测试:
<?php\r$filePath = './upload.txt';\rmove_uploaded_file($_FILES['myfile']['tmp_name'] , $filePath);\recho \"大众ok\"大众;\r?>
其余,根据RFC 1867 还可以实现一次上传多个文件的功能, 这个在这里就不详述, 须要的话可以详细参考RFC 1867来实现。