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

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进行存储。