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


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渲染頁面

clipboard.png

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的數據,並返回到頁面上

clipboard.png

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="提交")

渲染頁面:

clipboard.png

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字段,其余信息都是文件的。

clipboard.png

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM