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

Express处理GET/POST请求(POST请求包含文件)的更多相关文章

  1. HttpURLConnection发送POST请求(可包含文件)

    import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.File; import java.io. ...

  2. node.js的express模块实现GET和POST请求

    一.环境 1.安装express npm i express@4.17.1 // 安装express模块 2.安装nodemon npm i nodemon -g 3.安装cors npm insta ...

  3. http请求参数中包含特殊字符的严重后果,比如:#

    URL请求中不能包含特殊符号,比如:# 今天在调接口,突然发现接口参数中传递的数据没有完全接收到controller层的model模型中,反反复复测了好几遍,真不信这个邪了,头晕脑胀的时候才关注到UR ...

  4. ServletRequest HttpServletRequest 请求方法 获取请求参数 请求转发 请求包含 请求转发与重定向区别 获取请求头字段

      ServletRequest 基本概念 JavaWeb中的 "Request"对象  实际为   HttpServletRequest  或者  ServletRequest, ...

  5. jmeter接口测试-GET请求路径中包含特殊字符或中文导致Response400报错

    问题描述:接口测试中异常用例GET请求路径中包含特殊字符或中文,运行jmeter会报错,取样器中只能看到Response400,响应结果为空 解决思路: 对于通过BODY发送的中文内容可以用Jmete ...

  6. 接口测试时如何选择Encoding(针对请求数据内包含中文)

    如果请求数据中包含中文,需要将Encoding选择为utf-8

  7. 请求转发、包含、重定向 getAttribute 和 setAttribute POST和GET编码

     一.请求转发  请求包含  请求重定向 Demo5.java   注意:doPost()方法中别忘写doGet(request, response); public void doGet(HttpS ...

  8. Jmeter 请求参数中包含 MD5 加密的密码

    如何在jmeter中对参数进行加密 使用工具:java+myeclipse 让开发将他的加密类从eclipse中导出来打成jar包,放在jmeter安装文件夹lib文件夹中%JMETER HOME%\ ...

  9. c#代码发送post请求,上传文件(并带其他参数)

    本人对post理解不深,前段时间遇到一个需要用c#代码发送post请求上传文件的业务,于是参考了几篇帖子,加上自身实践写出了如下代码.写的比较low 望各位大大指正^_^. 业务需求: 对方给了一个接 ...

随机推荐

  1. 【COGS 2051】王者之剑 最小割

    这个其实就是在说明相邻的点不能取,我们发现只要其满足这个条件他总能走出来,那么我们就最小割就是了,我们先黑白染色,S 一排黑点 一排白点 T 对于相邻的点我们就直接中间连INF,于是就满足只要一个点选 ...

  2. HDU 5666 快速乘

    Segment Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  3. [HNOI2003]消防局的设立 (贪心)

    [HNOI2003]消防局的设立 题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达, ...

  4. java常用的时间格式

    年月日时分秒毫秒:yyyyMMddHHmmssSSS    毫秒用SSS表示.

  5. java的GC与内存泄漏

    从诞生至今,20多年过去,Java至今仍是使用最为广泛的语言.这仰赖于Java提供的各种技术和特性,让开发人员能优雅的编写高效的程序.今天我们就来说说Java的一项基本但非常重要的技术内存管理 了解C ...

  6. Every Programmer Should Know These Latency Numbers

    Every Programmer Should Know These Latency Numbers 1秒=1000毫秒(ms) 1秒=1,000,000 微秒(μs) 1秒=1,000,000,00 ...

  7. Phantomjs设置浏览器useragent的方式

    Selenium中使用PhantomJS,设置User-Agent的方法. 默认情况下,是没有自动设置User-Agent的:设置PhantomJS的user-agent def __init__(s ...

  8. 《vue.js实战》练习---标签页组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 一张图介绍 html中offset、client、scroll、offset 、padding、margin 各种属性介绍

  10. HDU3910(数学期望题,题目难懂)

    Liang Guo Sha Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...