4.4 从表单接受用户输入
4.4.1 处理提交的表单域
application/x-www-form-urlencoded:这是html表单的默认值
multipart/form-data:在表单重含有文件或二进制数据时使用
首先要实现一个支持GET和POST的服务器
var http = require('http');
var fs = require('fs');
var items = [];
var server = http.createServer((req, res)=>{
if ('/' === req.url) {
switch (req.method) {
case 'GET':
show(res);
break;
case 'POST':
add(req, res);
break;
default:
badRequest(res);
}
}else{
notFound(res);
}
})
实现show函数
function show(res){
var file = fs.readFileSync('./t.html').toString();
file = file.replace('%',items.join('</li><li>'));
res.setHeader("content-type",`text/html; charset="utf-8"`);
res.end(file);
}
<html>
<ul>
<li>%</li>
</ul>
<form method="POST" action="/">
<p><input type="text" name="item1" /></p>
<p><input type="submit" name="item" value="l啦啦啦啦" /></p>
</form>
<html>
实现两个错报函数
function notFound(res){
res.statusCode = 404;
res.setHeader('content-type','text/plain');
res.end('node found');
}
function badRequest(res){
res.statusCode = 400;
res.setHeader('content-type','text/plain');
res.end('bad request');
}
最后实现last函数
const querystring = require('querystring');
function add(req,res){
var body = '';
req.on('data',(chunk)=>{
body+=chunk;
})
req.on('end',()=>{
let value = querystring.parse(body);
items.push(value.item1);
show(res);
})
}
这个例子只处理application/x-www-form-urlencoded值,解析数据只需要把data事件数据拼接到一起。
附 处理标题提交乱码问题
前端表单含有中文会导致乱码,就是这种格式:
t1=%E7%9A%84%E7%91%9E%E7%89%B9%E8%AE%A9%E4%BB%96
其实这个只是decodeURI后的格式,只需要使用decodeURIComponent()函数解码就好拉~
其中包括这两个函数编码和解码
let encode = encodeURIComponent("啦啦啦");
console.log(encode); //%E5%95%A6%E5%95%A6%E5%95%A6
let decode = decodeURIComponent(encode);
console.log(decode); //啦啦啦
4.4.2 使用formidable处理上传的文件
上传文件必须要用multipart/form-data属性提交表单。
<form method='POST' action="/" enctype="multipart/form-data">
<p><input type="text" name="name"></p>
<p><input type='file' name="file"></p>
<p><input type="submit" value="upload"></p>
</form>
var fs = require('fs');
var http = require('http');
var server = http.createServer((req, res) => {
switch (req.method) {
case 'GET':
show(req,res);
break;
case 'POST':
upload(req, res);
break;
}
});
server.listen(8000);
function show(req,res){
res.setHeader("content-type",'text/html; charset="utf-8"');
var file = fs.readFileSync('./t.html');
res.end(file);
}
var formidable = require('formidable');
function upload(req,res){
if(!isFormData(req)){
res.statusCode = 400;
res.end('bad request');
return
}
var form = new formidable.IncomingForm();
form.encoding = 'utf-8'; //编码格式
form.uploadDir = './tmp'; //设置目录
form.keepExtensions = true; //保存文件后缀
//field在收完输入域后触发
form.on('field',function(field,value){
console.log(field);
console.log(value);
});
//在接受完文件后触发
form.on('file',function(name,file){
})
form.on('end',function(){
res.end('upload complete!');
})
form.parse(req);
}
function isFormData(req){
var type = req.headers['content-type'] || '';
return 0 == type.indexOf('multipart/form-data');
}