這篇文章主要介紹了Node.js實(shí)現(xiàn)文件上傳的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

在工作中碰到了這樣的需求，需要用nodejs 來上傳文件，之前也只是知道怎么通過瀏覽器來上傳文件， 用nodejs的話， 相當(dāng)于模擬瀏覽器的行為。 google 了一番之后， 明白了瀏覽器無非就是利用http協(xié)議來給服務(wù)器傳輸數(shù)據(jù)， 具體協(xié)議就是《RFC 1867 - Form-based File Upload in HTML》， 在瀏覽器上通過form 表單來上傳文件就是通過這個(gè)協(xié)議，我們可以先看看瀏覽器給服務(wù)端發(fā)送了什么數(shù)據(jù)， 就可以依葫蘆畫瓢的把上傳功能實(shí)現(xiàn)出來。說起form 表單上傳文件的話， 大家應(yīng)該很熟悉：

<form action="http://www.qq.com/" method="post">

<input type="text" name="text1" /><br />

<input type="text" name="text2" /><br />

<input type="submit" />

</form>

提交時(shí)， 用fiddler 抓包可以看到向服務(wù)端發(fā)出這樣的數(shù)據(jù)：

POST http://www.qq.com/ HTTP/1.1

Host: www.qq.com

Content-Length: 23

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

text1=hello&text2=world

值得注意的是Content-Type默認(rèn)為application/x-www-form-urlencoded，所以消息會(huì)經(jīng)過URL編碼。比如“你好”會(huì)編碼為 %E4%BD%A0%E5%A5%BD。

接下來我們看一下通過form 表單是怎么上傳的。大家應(yīng)該也不陌生：

<form action="http://www.qq.com" method="post" enctype="multipart/form-data">

<input type="file" name="myfile" />

<input type="submit" value="submit" />

</form>

然后新建一個(gè)只有hello world字樣的upload.txt文本文件上傳上去，我們?cè)俪杂胒iddler 來抓下包， 可以發(fā)現(xiàn)發(fā)送過去的數(shù)據(jù)稍微復(fù)雜了一些（已經(jīng)去掉了很多的其它沒關(guān)系的請(qǐng)求行，比如緩存控制和cookie之類的）：

POST http://www.qq.com/ HTTP/1.1

Host: www.qq.com

Content-Length: 199

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

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G

Content-Disposition: form-data; name="myfile"; filename="upload.txt"

Content-Type: text/plain

hello world

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G--

根據(jù)RFC 1867的定義，我們需要生成一段邊界數(shù)據(jù)，這個(gè)數(shù)據(jù)不能在內(nèi)容的其它地方出現(xiàn)，這個(gè)可以自己定義， 在每個(gè)瀏覽器的生成算法可能都不一樣， 上面的boundary就是分隔數(shù)據(jù)，生成了分隔數(shù)據(jù)之后， 就可以把分隔數(shù)據(jù)放在頭部的Content-Type里面?zhèn)魉徒o服務(wù)端， 也就是上文的 Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G， 另外，上傳的內(nèi)容，需要用分隔數(shù)據(jù)來分隔成若干個(gè)段，然后每段數(shù)據(jù)里面都有文件的文件名，還有上傳時(shí)候的name，服務(wù)端就是用這個(gè)name來接收文件，還有文件的類型Content-Type，在這個(gè)例子里是 text/plain，如果上傳的是png圖片就是image/png。文件類型的一個(gè)空行后就是所上傳的文件的內(nèi)容，在這個(gè)例子里也是為了容易理解所以上傳的是文本文件所以內(nèi)容直接就能夠顯示出來，如果上傳的是圖片文件， 因?yàn)槭嵌M(jìn)制文件，fiddler 就顯示的是亂碼。 文件的內(nèi)容結(jié)束之后就是一個(gè)空行再加上邊界數(shù)據(jù)。

了解了發(fā)送格式的細(xì)節(jié)之后， 下一步就是使用nodejs來編程實(shí)現(xiàn)，簡(jiǎn)單來講， 就是按照格式把數(shù)據(jù)發(fā)送給服務(wù)端就行了。

const http = require('http');

const fs = require('fs');

//post地址為本地服務(wù)的一個(gè)php，用于測(cè)試上傳是否成功

var options = {

hostname: 'localhost',

port: 80,

path: '/get.php',

method: 'POST'

}

//生成分隔數(shù)據(jù)

var boundaryKey = '----WebKitFormBoundaryjLVkbqXtIi0YGpaB';

//讀取需要上傳的文件內(nèi)容

fs.readFile('./upload.txt', function (err, data) {

//拼裝分隔數(shù)據(jù)段

var payload = '--' + boundaryKey + '\r\n' + 'Content-Disposition:form-data; name="myfile"; filename="upload.txt"\r\n' + 'Content-Type:text/plain\r\n\r\n';

payload += data;

payload += '\r\n--' + boundaryKey + '--';

//發(fā)送請(qǐng)求

var req = http.request(options, function (res) {

res.setEncoding('utf8');

res.on('data', function (chunk) {

console.log('body:' + chunk);

});

});

req.on('error', function(e) {

console.error("error:"+e);

});

//把boundary、要發(fā)送的數(shù)據(jù)大小以及數(shù)據(jù)本身寫進(jìn)請(qǐng)求

req.setHeader('Content-Type', 'multipart/form-data; boundary='+boundaryKey+'');

req.setHeader('Content-Length', Buffer.byteLength(payload, 'utf8'));

req.write(payload);

req.end();

});

本文重點(diǎn)在于了解協(xié)議并且用代碼實(shí)現(xiàn)出來， 代碼組織上面還有很多優(yōu)化的地方。

最后在本地apache，簡(jiǎn)單寫一個(gè)php來保存上傳的文件來用作測(cè)試：

<?php

$filePath = './upload.txt';

move_uploaded_file($_FILES['myfile']['tmp_name'] , $filePath);

echo "ok";

?>

另外，根據(jù)RFC 1867 還可以實(shí)現(xiàn)一次上傳多個(gè)文件的功能， 這個(gè)在這里就不詳述， 需要的話可以詳細(xì)參考RFC 1867來實(shí)現(xiàn)。

以上所述是小編給大家介紹的Node.js實(shí)現(xiàn)文件上傳，希望對(duì)大家有所幫助