我們使用 form 和 input 控制元件上傳檔案到伺服器，伺服器採取 Node.js 應用接收客戶端上傳的檔案。可以使用 `multiparty` 這個庫檔案，解析從客戶端提交的本地檔案。完整的原始碼如下圖所示：

```typescript
var multiparty = require('multiparty');
var http = require('http');
var util = require('util');
const PORT = 3003;

http.createServer(function(req, res) {
  if (req.url === '/upload' && req.method === 'POST') {
    // parse a file upload
    var form = new multiparty.Form();

form.parse(req, function(err, fields, files) {
      res.writeHead(200, { 'content-type': 'text/plain' });
      res.write('received upload:\n\n');
      res.end(util.inspect({ fields: fields, files: files }));
    });

return;
  }

// show a file upload form
  res.writeHead(200, { 'content-type': 'text/html' });
  res.end(
    '<form action="http://blog.itpub.net/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple=""><br>'+
    '<input type="submit" value="upload your file">'+
    '</form>'
  );
}).listen(PORT);

console.log('listen on port:' + PORT);
```

檔案上傳的具體實現：

使用 HTML 標準的 form 標籤，action 值為 `/upload`, 這個值在 Node.js 應用裡會再次用到。

enctype 為 `multipart/form-data`：

![](https://img-blog.csdnimg.cn/img_convert/18163f79c75445b1206473a7cf963da0.png)

使用 `input` 控制元件，屬性指定為 `file`，multiple 屬性為 `multiple`，以支援多檔案上傳。

一旦我在瀏覽器裡輸入 http://localhost:3003/ 之後，下列斷點就觸發：提示有新的客戶端連線到達：

![](https://img-blog.csdnimg.cn/img_convert/9b5cea56d782155b75cd06978165ad3b.png)

此時 `createServer` 裡的回撥函式，req 的型別為 IncomingMessage，url 欄位的值為 `/`：

![](https://img-blog.csdnimg.cn/img_convert/eb5a2410b8c7514bed37c5d12d6ad35a.png)

此時返回一個檔案上傳的網頁給客戶端：
![](https://img-blog.csdnimg.cn/img_convert/37c07be8f15c499b2fed6e7cd0d37cb6.png)

如下圖所示：
![](https://img-blog.csdnimg.cn/img_convert/0f545b9236f168bd8c68a1abbb4a972c.png)

選中兩個檔案後，點選 `Upload your files`：
![](https://img-blog.csdnimg.cn/img_convert/02f3d25e47b0c67798f634d58c721898.png)

此時 url 變成了 form 裡指定的 `/upload`，method 變成了 POST：
![](https://img-blog.csdnimg.cn/img_convert/c07a6e4dd964da47ac41a41b06a484b3.png)

執行 `form.parse` 註冊回撥函式。注意，此時這個回撥函式並不會立即執行。

![](https://img-blog.csdnimg.cn/img_convert/49ac26d4477cd3a1e5843fe7699e38e8.png)

稍後，當兩個本地檔案的資料流都完整上傳到伺服器之後，註冊的回撥函式以非同步的方式被觸發：

![](https://img-blog.csdnimg.cn/img_convert/d42d8493fce2595d52710d0b80a9f03f.png)

在此回撥函式里，req 物件不再可用，只能訪問 res(ServerResponse), error, fields, files 這種欄位：

![](https://img-blog.csdnimg.cn/img_convert/996e1fe539e01eab1edb9c92c97e1c4f.png)

我們在 title 欄位輸入 `Jerry 123` 之後，點選 upload 按鈕：
![](https://img-blog.csdnimg.cn/img_convert/7f9a0b4a4e65d9346d0a8093157ecae9.png)

可以從 fields 欄位獲得 title 內容，從 files 欄位獲取上傳的檔案的檔名和尺寸，以及本地的絕對路徑：
![](https://img-blog.csdnimg.cn/img_convert/7834d285de01640767be4fa1de6c0801.png)

如何使用 multiparty 工具庫在 Node.js 應用裡解析 multipart form-data 格式的請求

相關文章