Express處理GET/POST請求(POST請求包含文件)

GET

使用簡潔的pug模板引擎，寫一個表單，提交方法是GET

前端頁面代碼

enctype,默認是application/x-www-form-urlencode

doctype html
html
  form(action="/ex_get" method="GET")
    label(for="fieldName") 名字: 
    input(type="text" id="fieldName" name="name")
    label(for="fieldEmail") 郵箱: 
    input(type="email" id="fieldEmail" name="email")
    input(type="submit" value="提交")

PUG渲染頁面

Express處理GET請求代碼

const express = require("express")
// POST需要用到body-parser,GET不需要require
// const bodyParser = require(body-parser)

const app = express()
let port = process.env.port || 3000
app.set("view engine", "pug")
// app.use(bodyParser.urlencoded({ extended: true }))

app.get("/", (req, res) => {
  res.render("get",{})
})
app.get("/ex_get", (req, res) => {
  let response = {
    name: req.query.name,
    email: req.query.email
  }
  res.send(JSON.stringify(response))
})
app.listen(3000, () => {
  console.log(`running on port: ${port}`)
})

Express獲取GET的數據，並返回到頁面上

POST

前端頁面代碼

相對GET，改了method字段為POST，有file字段必須將enctype等於multipart/form-data並且為了讓POST發揮它的優點，增加了fileinput字段。這里上傳了一張avatar.jpg的圖片。

doctype html
html
  form(action="/ex_post" method="POST" enctype="multipart/form-data")
    label(for="fieldName") 名字: 
    input(type="text" id="fieldName" name="name")
    label(for="fieldEmail") 郵箱: 
    input(type="email" id="fieldEmail" name="email")
    input(type="file" name="avatar")
    input(type="submit" value="提交")

渲染頁面：

const express = require("express")
const bodyParser = require("body-parser")
// 解析帶文件上傳的表單需要
const formidable = require("formidable")

const app = express()
let port = process.env.port || 3000
app.set("view engine", "pug")
app.use(bodyParser.urlencoded({ extended: true }))
app.get("/", (req, res) => {
  res.render("post",{})
})
app.post("/ex_post", (req, res) => {
  var form = new formidable.IncomingForm()
  form.parse(req, function(err, fields, files) {
    if (err) return res.redirect(303, '/error')
    let response = {
      fields,
      files
    }
    res.send(response)
  })
})
app.listen(3000, () => {
  console.log(`running on port: ${port}`)
})

Express使用formidable作為解析文件的模塊，將解析表單結果返回到頁面上，除了name和email字段，其余信息都是文件的。

最后，你可以對上傳到的文件進行存儲，目前有三種方案：

1. 文件系統持久化，就是把文件數據存到扁平文件【扁平的意思是文件沒有任何結構，只是一串字節】,性能不好
2. 雲持久化，比如亞馬遜S3，微軟Azure
3. 數據庫持久化，這是目前最常用的，在NODE應用中，大多使用MongoDB進行存儲。