Node.js 中怎么向HTTP服務器中上傳文件和圖片

這期內容當中小編將會給大家帶來有關Node.js 中怎么向HTTP服務器中上傳文件和圖片，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

HTTP協議中的文件上傳

最早的HTTP協議中是不支持文件上傳的，在1995年制定的rfc1867規范中，在HTTP POST請求的內容類型Content-Type中擴展了multipart/form-data類型，該類型用于向服務器發送二進制數據，以便支持文件的上傳。

POST上傳文件

我們通過form表單提交文件時，會構造類似像下面這樣一個表單：

<form enctype="multipart/form-data" action="_URL_" method="POST">
 <input name="userfile1" type="file">
 <input type="submit" value="發送文件">
</form>

在使用form提交表單數據時，默認的編碼格式為application/x-www-form-urlencoded，上傳文件時需要通過enctype屬性將編碼方式設置為multipart/form-data。

HTTP數據提交與服務器數據解析

在包含請求體的請求中，提交的數據會按指定編碼類型進行編碼，而客戶端會按編碼方式設置請求頭中的Content-Type字段。
在一個application/x-www-form-urlencoded編碼的請求中，會設置一個如下的請求頭：

Content-Type:application/x-www-form-urlencoded

而用于文件上傳的編碼方式multipart/form-data，會設置一個如下的請求頭：

Content-type: multipart/form-data, boundary=AaB03x

服務器數據接收與解析

對于一個編碼方式為application/x-www-form-urlencoded的請求來說，會對提交內容進行URL編碼。服務器會收到類似如下內容：

POST / HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: itbilu.com
Content-Length: 23
Connection: Keep-Alive
Cache-Control: max-age=0

key1=value1&key2=value2

請求頭與請求體之間會有一個空行，服務器會對請求體以queryString的方式進行解碼。

而對一個multipart/form-data的文件上傳請求來說，收到的內容類似如下：

POST / HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryYN9YYwO9ESipYBIx
Accept-Encoding: gzip, deflate
Host: itbilu.com
Content-Length: 22646
Connection: Keep-Alive
Cache-Control: max-age=0

------WebKitFormBoundaryoqBx9oYBhx4SF1YQ
Content-Disposition: form-data; name="myName"

itbilu.com
------WebKitFormBoundaryYN9YYwO9ESipYBIx
Content-Disposition: form-data; name="upload"; filename="41GiLecHO3L.jpg"
Content-Type: image/jpeg

????JFIF??C // 文件的二進制數據
……
--------WebKitFormBoundaryYN9YYwO9ESipYBIx--

在請求頭的Content-Type字段中，除了編碼類型為multipart/form-data描述外，還有一個boundary屬性，這是客戶端隨機生成的一個數據邊界描述。

如上所示，文件上傳時內容是分段傳輸的，每一boundary表示一個fild（form表單控值）邊界。

如上面示例所示，上傳文件時除內容描述外還包含一個的Content-Type文件MIME的描述，其后是一個空行和文件的二進制數據。所有的表單數據結束后，會有一個”–”+boundary+”–”結束符。而服務器接收到數據后，同樣會根據boundary來進行數據的接收和解析。

Node.js中處理圖片/文件上傳

Node.js中處理文件上傳的第三方模塊，本站曾經介紹過使用formidable模塊處理文件上傳，下面簡單介紹使用Node.js原生環境處理圖片上傳，上傳文件時也可以參考處理。

首先，使用Node.js的HTTP模塊創建一個HTTP服務器：

const http = require('http');
const fs = require('fs');
const util = require('util');
const querystring =require('querystring');

//用http模塊創建一個http服務端
http.createServer(function(req, res) {
 if (req.url == '/upload' && req.method.toLowerCase() === 'get') {
  //顯示一個用于文件上傳的form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
   '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="file" name="upload" multiple="multiple" />'+
    '<input type="submit" value="Upload" />'+
   '</form>'
  );
 } else if (req.url == '/upload' && req.method.toLowerCase() === 'post') {
  if(req.headers['content-type'].indexOf('multipart/form-data')!==-1)
   parseFile(req, res)
  } else {
   res.end('其它提交方式');
  }
}).listen(3000);

在這一步中，我們創建HTTP 服務器，當GET請求時，會加載一上用于文件上傳的form表單。上傳文件會通過POST方式提交到服務器，這時服務端會通過parseFile函數解析并保存文件，其解析代碼如下：

function parseFile (req, res) {
 req.setEncoding('binary');
 var body = '';  // 文件數據
 var fileName = ''; // 文件名
 // 邊界字符串
 var boundary = req.headers['content-type'].split('; ')[1].replace('boundary=','');
 req.on('data', function(chunk){
  body += chunk;
 });

 req.on('end', function() {
  var file = querystring.parse(body, '\r\n', ':')

  // 只處理圖片文件
  if (file['Content-Type'].indexOf("image") !== -1)
  {
   //獲取文件名
   var fileInfo = file['Content-Disposition'].split('; ');
   for (value in fileInfo){
    if (fileInfo[value].indexOf("filename=") != -1){
     fileName = fileInfo[value].substring(10, fileInfo[value].length-1);

     if (fileName.indexOf('\\') != -1){
      fileName = fileName.substring(fileName.lastIndexOf('\\')+1);
     }
     console.log("文件名: " + fileName);
    }
   }

   // 獲取圖片類型(如：image/gif 或 image/png))
   var entireData = body.toString();
   var contentTypeRegex = /Content-Type: image\/.*/;

   contentType = file['Content-Type'].substring(1);

   //獲取文件二進制數據開始位置，即contentType的結尾
   var upperBoundary = entireData.indexOf(contentType) + contentType.length;
   var shorterData = entireData.substring(upperBoundary);

   // 替換開始位置的空格
   var binaryDataAlmost = shorterData.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

   // 去除數據末尾的額外數據，即: "--"+ boundary + "--"
   var binaryData = binaryDataAlmost.substring(0, binaryDataAlmost.indexOf('--'+boundary+'--'));

   // 保存文件
   fs.writeFile(fileName, binaryData, 'binary', function(err) {
    res.end('圖片上傳完成');
   });
  } else {
   res.end('只能上傳圖片文件');
  }
 });
}

req是一個IncomingMessage對象，而該對象又實現了ReadableStream，所以我們可以用流的方式來接收數據。數據接收完成了，按rfc1867規范進行了數據處理，并通過fs模塊保存了文件。

上述就是小編為大家分享的Node.js 中怎么向HTTP服務器中上傳文件和圖片了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。