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. Spring源码解析-基于注解依赖注入

    在spring2.5版本提供了注解的依赖注入功能,可以减少对xml配置. 主要使用的是 AnnotationConfigApplicationContext: 一个注解配置上下文 AutowiredA ...

  2. poj1185 炮兵阵地 状压dp

    司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用"P"表示) ...

  3. js中连写两个?:三元运算符语法解释

    在angular 源码中有连写两个三元运算符的代码: var hash = isString(hash) ? hash : isNumber(hash) ? hash.toString() :$loc ...

  4. bzoj 1110 [POI2007]砝码Odw 贪心+进制转化

    [POI2007]砝码Odw Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 661  Solved: 366[Submit][Status][Disc ...

  5. 【转载】How long is “too long” for MySQL Connections to sleep?

    From:http://dba.stackexchange.com/questions/1558/how-long-is-too-long-for-mysql-connections-to-sleep ...

  6. 如何根据pom.xml文件下载jar包

    遇到过这种情况:从网上下载了一个项目, 使用的maven, 但是我想要新建一个项目, 但是不需要使用maven. 但是我怎么样才能将他那个项目的所有引用的jar包给下载下载下来呢; 1.下载一个mav ...

  7. HDU 1162 Eddy's picture (最小生成树 普里姆 )

    题目链接 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to be ...

  8. vue入门介绍

    vue:解决前端大型应用的开发,将之前几十个.几百个.更多的HTML页面集成1个html页面(单页面应用)jquery:前端方法库bootstrap:UI组件库 angular/react这两个框架都 ...

  9. 【洛谷P3708】Koishi的数学题

    可以很显然的看出分块的性质…… 看不出来的打个表也能看出来. 然后就是随手做做就行了. #include<bits/stdc++.h> #define N 1000005 typedef ...

  10. 2.jinja2

    1.jinja2模板介绍和查找路径 from flask import Flask, render_template import os # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...