node.js表单处理和文件上传
一、get请求
表单提交HTML
<html>
<head>
<meta charset="utf-8">
<title>表单提交title>
head>
<body>
<form action="http://127.0.0.1:2080/" method="GET">
<input type="text" name="name"><br>
<input type="text" name="age">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
<input type="submit">
form>
body>
html>
node.js服务器搭建
这里重要利用了url模块，其中url.parse(req.url, true).query，
url.parse()第二个参数设置为true，则 query 属性总会通过 querystring 模块的 parse() 方法生成一个对象。 如果为 false，则返回的 URL 对象上的 query 属性会是一个未解析、未解码的字符串。 默认为 false。
- API资料：url模块 http://nodejs.cn/api/url.html
const http = require('http');
const url = require('url');
const server = http.createServer((req, res) => {
const queryObj = url.parse(req.url, true).query;
res.writeHead(200, {
'Content-Type': 'text/html; charset=UTF8'
})
const name = queryObj.name;
const age = queryObj.age;
const sex = queryObj.sex;
res.write(`服务器接受到提交： name：${name}, age: ${age}, sex: ${sex}`);
res.end();
})
server.listen(2080, '127.0.0.1');运行
命令行启动服务器 ，打开html文件,注意不需要写服务器域名
填写表单，提交数据,当点击提交后，请求的的url直接从file:///Users/shaojinghong/Desktop/form.html
变成http://127.0.0.1:2080/?name=jinghong&age=22&sex=%E7%94%B7
二、POST请求
搭建服务端
post请求服务端固定写法： req.addListener(‘data’, (chunk) => { })和req.addListener(‘end’, () => {});用来一段一段接受buffer格式的表单数据，然后调用toString()得到字段name=%E6%99%AF%E6%B4%AA&%E7%94%B7=on，然后调用 querystring模块的parse(dataString)将这种字符串转换成对象
const http = require('http');
const querystring = require('querystring');
const server = http.createServer((req, res) => {
if (req.url == '/dopost' && req.method.toLowerCase() == 'post'){
// 如果访问的地址是这个，并且请求方法是post
let allData = '';
// 下面是为了追求极致，是一小段一小段chunk接收的
req.addListener('data', (chunk) => {
// chunk为buffer类型
allData += chunk;
console.log(chunk); // 6 e 61 6d 65 3d 25 45 36 25 39 39 25 41 46 25 45 36 25 42 34 25 41 41 26 25 45 37 25 39 34 25 42 37 3d 6f 6e>
});
// 表单chunk全部接收完毕
req.addListener('end', () => {
let dataString = allData.toString();
console.log(dataString);// name=%E6%99%AF%E6%B4%AA&%E7%94%B7=on
let dataobj = querystring.parse(dataString);
console.log(dataobj); // { name: '景洪', '男': 'on' }
res.end('success');
})
}
});
server.listen(8080, '127.0.0.1'); 编写表单HTML
<html>
<head>
<title>post实验title>
<meta charset="utf-8">
head>
<body>
<form action="http://127.0.0.1:8080/dopost" method="post">
<p>
姓名：<input type="text" name="name">
p>
<p>
性别：
<input type="radio" name="男">男
<input type="radio" name="女">女
p>
<p>
<input type="submit">
p>
form>
body>
html>
运行server，提交表单
三、post上传文件
编写HTML表单文件
注意使用 < form action=”http://127.0.0.1:8080/dopost” method=”post” enctype=”multipart/form-data” >和< input type=”file” name=”picture” >标签
关于file上传标签说明：http://www.w3school.com.cn/jsref/dom_obj_fileupload.asp
具体代码：
<html>
<head>
<title>post实验title>
<meta charset="utf-8">
head>
<body>
<form action="http://127.0.0.1:8080/dopost" method="post" enctype="multipart/form-data">
<p>
姓名：<input type="text" name="name">
p>
<p>
性别：
<input type="radio" name="男">男
<input type="radio" name="女">女
p>
<p>
图片上传
<input type="file" name="picture">
p>
<p>
<input type="submit">
p>
form>
body>
html>
编写node服务器端代码，使用formidable包，进行post数据的接收、解析
formidable： https://www.npmjs.com/package/formidable
const http = require('http');
const querystring = require('querystring');
const formidable = require('formidable');
const server = http.createServer((req, res) => {
if (req.url == '/dopost' && req.method.toLowerCase() == 'post'){
var form = new formidable.IncomingForm();
// 设置文件保存路径，相对路径
form.uploadDir = "./uploads";
// 解析表单， fields表示文本域，files表示文件域
form.parse(req, function(err, fields, files) {
console.log(fields, files);
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end();
});
}
});
server.listen(8080, '127.0.0.1'); 
使用express解析post提交的数据为json格式
这里需要使用body-parser这个中间件
const express = require('express');
// 使用中间件之前先npm install body-parser
const bodyParser = require('body-parser');
const app = new express();
//使用中间件
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json());
app.post('/', (req, res) => {
console.log(req.body);
res.send();
});
app.listen(3000);