摘要：前言在開發(fā)中，文件上傳是一個非常常見非常重要的功能。本文將介紹如何用處理上傳的文件。前端界面如下用戶從瀏覽器中選擇文件，點擊上傳，將發(fā)起請求到服務器，服務器將接受到的文件存儲在服務器硬盤中。

在Web開發(fā)中，文件上傳是一個非常常見、非常重要的功能。本文將介紹如何用Node處理上傳的文件。

由于現(xiàn)在前后端分離很流行，那么本文也直接采用前后端分離的做法。前端界面如下：

用戶從瀏覽器中選擇文件，點擊上傳，將發(fā)起http請求到服務器，服務器將接受到的文件存儲在服務器硬盤中。

ajax請求庫采用axios，為了簡化說明，前端限制上傳的文件類型只能為圖片，且一次只能上傳一張，有興趣的朋友可以自行補充，代碼如下：

  
  
  


  
  上傳

  

這是本文要介紹的重點，為了用高效流暢的方式來解析文件上傳請求，我們先引入formidable庫：

npm install formidable --save

formidable的流式解析器讓它成為了處理文件上傳的絕佳選擇，也就是說它能隨著數(shù)據(jù)塊的上傳接收它們，解析它們，并吐出特定的部分，相信熟悉流的朋友會很好理解。這種方式不僅快，還不會因為需要大量緩沖而導致內存膨脹，即便像視頻這種大型文件，也不會把進程壓垮。
首先，我們在根目錄下創(chuàng)建myImage文件，用于存放上傳的圖片（注意：如果沒有創(chuàng)建，會導致上傳報錯），接著，我們創(chuàng)建一個IncomingForm實例form，并且設置存放路徑為myImage文件夾。代碼如下：

var http = require("http")
var formidable = require("formidable")

var server = http.createServer(function(req, res){
  // 1 設置cors跨域
  res.setHeader("Access-Control-Allow-Origin", "*")
  res.setHeader("Access-Control-Allow-Headers", "Content-Type")
  res.setHeader("Content-Type", "application/json")

  // 2
  switch (req.method) {
    case "OPTIONS":
      res.statusCode = 200
      res.end()
      break
    case "POST":
      upload(req, res)
      break
  }
})

function upload(req, res) {
  // 1 判斷
  if (!isFormData(req)) {
    res.statusCode = 400
    res.end("錯誤的請求, 請用multipart/form-data格式")
    return
  }

  // 2 處理
  var form = new formidable.IncomingForm()
  form.uploadDir = "./myImage"
  form.keepExtensions = true

  form.on("field", (field, value) => {
    console.log(field)
    console.log(value)
  })
  form.on("end", () => {
    res.end("上傳完成!")
  })

  form.parse(req)
}

function isFormData(req) {
  let type = req.headers["content-type"] || ""
  return type.includes("multipart/form-data")
}

server.listen(3000)
console.log("port is on 3000.")

用node app開啟http服務器后，在前端頁面中上傳一張kitty.jpg，我們看到控制臺打印出了前端上傳的imgName屬性：kitty.jpg

并且，myImage文件夾目錄下多了一張圖片：

打開一看，正是從前端上傳的那張kitty.jpg

我們發(fā)現(xiàn)，這個默認的文件名稱并不是我們想要的，我們想改成以當前時間戳命名的文件，添加的功能代碼如下：

  var fs = require("fs")

  form.on("file", (name, file) => {
    // 重命名文件
    let types = file.name.split(".")
    let suffix = types[types.length - 1]
    fs.renameSync(file.path, "./myImage/" + new Date().getTime() + "." + suffix)
  })

再次上傳，發(fā)現(xiàn)現(xiàn)在存的照片名稱已經變成我們想要的格式了。

Formidable的progress事件能給出收到的字節(jié)數(shù)，以及期望收到的字節(jié)數(shù)。我們可以借助這個做出一個進度條。
我們?yōu)樯厦娴某绦蛱砑酉旅娴拇a，每次有progress事件激發(fā)，就會計算百分比并用console.log()輸出：

  form.on("progress", (bytesReceived, bytesExpected) => {
    var percent = Math.floor(bytesReceived / bytesExpected * 100)
    console.log(percent)
  })

再次上傳一張圖片，現(xiàn)在控制臺已經會打印出進度顯示了：

當然，一般情況下，我們是要把這個進度傳回到用戶的瀏覽器中去，這對于任何想要上傳大型文件的程序來說是個很棒的特性，并且這是個很適合用Node完成的任務。比如說用WebSocket協(xié)議，或者像Socket.IO這樣的實時模塊，關于Node中使用websocket，后面我會多帶帶出一篇文章來介紹。

任何時候都不要忘了對程序添加錯誤處理，如果你的程序在重要的時候崩掉了，可能輕則被老板打屁股，重則拉出去祭天。想象一下，如果用戶上傳的圖片很大，并且用戶的網絡還很慢，那么上傳的時間會超出前端代碼中設置的請求超時時間2s，服務器就會崩掉，不信？我們來試一下。
首先，我選擇了一張很大的圖片，5M，并且用chrome瀏覽器將瀏覽器網絡環(huán)境設置為slow 3g，設置方法如下：
f12打開開發(fā)者工具，在more tools--network conditions

點擊上傳，我們看見服務端控制臺的信息如下，服務器崩掉了：

所以，最后我們加上了錯誤處理，代碼如下：

  // 加上錯誤處理，防止用戶網絡慢，或者取消上傳，導致服務器崩掉
  form.on("error", err => {
    console.log(err)
    res.statusCode = 500
    res.end("服務器內部錯誤!")
  })

現(xiàn)在，相信你已經學會了如何用Node處理文件上傳了，結合前面的那篇用Node提供靜態(tài)文件服務的文章，你是不是能夠自己摸索著去嘗試做一些有趣的事情了呢？

formidable文檔
input的file類型的accept屬性