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. [Leetcode] container with most water 最大水容器

    Given n non-negative integers a1 , a2 , ..., an , where each represents a point at coordinate (i, ai ...

  2. day10_plus

    刚才发奖哈哈哈 想不到被惨虐的我还能混个牌子哈哈哈好开心

  3. python3处理pdf

    https://github.com/1049451037/pdfminer3k 使用pdfminer3k,如果是python2的话直接用pdfminer就行了. python setup.py in ...

  4. jsonArray与jsonObject

    最近两个星期接触最多的就是json和map了. 之前用到的json,就是一个键对应一个值,超级简单的一对一关系.现在用到的json那可以层层嵌套啊,刚开始接触的时候,确实有种崩溃的赶脚,不想去理,取个 ...

  5. mysql__索引的设计和使用

    索引的设计和使用 1 索引概述 MySIAM和InnoDB存储引擎的表默认创建的都是BTREE索引,MySQL目前不支持函数索引,但是支持前缀索引.还支持全文本索引,但是只有MySIAM(5.0开始) ...

  6. AngularJs学习——实现列表内容项的增加删除

    效果截图: 说明:引入bootstrap.min.css样式库和angular.min.js的静态资源库,实现列表内容的增加和删除操作. AngularJS代码: <script src=&qu ...

  7. Spring任务调度<task:scheduled-tasks>【含cron参数详解】 (转载)

    Spring内部有一个task是Spring自带的一个设定时间自动任务调度 task使用的时候很方便,但是他能做的东西不如quartz那么的多! 可以使用注解和配置两种方式,配置的方式如下 引入Spr ...

  8. jspersonft有关Table数据绑定(一)

    一:前言 在公司来就学着做报表,觉得这个报表学着还是很有意义的.jspersonft我在网上搜了一些有关的资料但是不是很多,现在就是学一点就记载一点.好记性不如烂笔头嘛! 二:在jspersonft定 ...

  9. SCC模板

    vector<int> G[maxn]; int pre[maxn], low[maxn], c[maxn]; int n, m; stack<int> s; int dfst ...

  10. Mysql添加视图

    有时候复杂的查询需要创建视图,可以简化查询.我们也可以将视图包装成对象,这样查询后在Java中也可以直接封装为对象. 原来的表结构