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

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

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

用戶從瀏覽器中選擇文件，點(diǎn)擊上傳，將發(fā)起http請(qǐng)求到服務(wù)器，服務(wù)器將接受到的文件存儲(chǔ)在服務(wù)器硬盤中。

ajax請(qǐng)求庫(kù)采用axios，為了簡(jiǎn)化說(shuō)明，前端限制上傳的文件類型只能為圖片，且一次只能上傳一張，有興趣的朋友可以自行補(bǔ)充，代碼如下：

  
  
  


  
  上傳

  

這是本文要介紹的重點(diǎn)，為了用高效流暢的方式來(lái)解析文件上傳請(qǐng)求，我們先引入formidable庫(kù)：

npm install formidable --save

formidable的流式解析器讓它成為了處理文件上傳的絕佳選擇，也就是說(shuō)它能隨著數(shù)據(jù)塊的上傳接收它們，解析它們，并吐出特定的部分，相信熟悉流的朋友會(huì)很好理解。這種方式不僅快，還不會(huì)因?yàn)樾枰罅烤彌_而導(dǎo)致內(nèi)存膨脹，即便像視頻這種大型文件，也不會(huì)把進(jìn)程壓垮。
首先，我們?cè)诟夸浵聞?chuàng)建myImage文件，用于存放上傳的圖片（注意：如果沒有創(chuàng)建，會(huì)導(dǎo)致上傳報(bào)錯(cuò)），接著，我們創(chuàng)建一個(gè)IncomingForm實(shí)例form，并且設(shè)置存放路徑為myImage文件夾。代碼如下：

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

var server = http.createServer(function(req, res){
  // 1 設(shè)置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("錯(cuò)誤的請(qǐng)求, 請(qǐng)用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服務(wù)器后，在前端頁(yè)面中上傳一張kitty.jpg，我們看到控制臺(tái)打印出了前端上傳的imgName屬性：kitty.jpg

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

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

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

  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)在存的照片名稱已經(jīng)變成我們想要的格式了。

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

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

再次上傳一張圖片，現(xiàn)在控制臺(tái)已經(jīng)會(huì)打印出進(jìn)度顯示了：

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

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

點(diǎn)擊上傳，我們看見服務(wù)端控制臺(tái)的信息如下，服務(wù)器崩掉了：

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

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

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

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