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發揮它的優點,增加了file
input字段。這里上傳了一張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字段,其余信息都是文件的。
最后,你可以對上傳到的文件進行存儲,目前有三種方案:
- 文件系統持久化,就是把文件數據存到
扁平文件
【扁平的意思是文件沒有任何結構,只是一串字節】,性能不好 - 雲持久化,比如亞馬遜S3,微軟Azure
- 數據庫持久化,這是目前最常用的,在NODE應用中,大多使用MongoDB進行存儲。