《node.js实战》第四章（4.4—4.5）构建web程序_node.js开发实战教程(慕课版)第四章拓展实训-优快云博客

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');
}