NodeJs【自学笔记】2

NodeJs 自学笔记2

实现 表单提交 和 文件上传

表单提交：

• 获取输入数据

文件上传：

• 多文件上传
• 验证上传文件格式
• 验证上传文件大小

目录结构：

![结构](https://img-blog.youkuaiyun.com/20160304164304845)

www.js

//获取server.js 服务器文件  
var server = require("../Server");

//获取router.js 入口文件  
var router = require("../routes/Router");

//获取requestHandlers.js 请求处理文件  
var requestHandlers = require("../request/requestHandlers");

//配置handle请求  
var handle = {};

//配置 用户输入 / 的请求方法  
handle["/"] = requestHandlers.start;

//配置 用户输入 /start 的请求方法  
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/file_img"] = requestHandlers.file_img;
handle["/upload_file"] = requestHandlers.upload_file;
handle["/show"] = requestHandlers.show;



//执行 server start方法，把 router and handle作为参数一起带入。
server.start(router.route, handle);  

Server.js

//获取http服务器  
var http = require("http");


//服务器创建方法  
function start(route, handle) {

    //服务器请求，响应方法
    function onRequest(request, response) {
            //入口方法
            route(handle, request, response);
    }

    //获取创建的服务器
    var newServer = http.createServer(onRequest);
    //设置端口
    newServer.listen(8888);
    console.log("------------------------------------Run------------------------------------");
}

//创建本js的模块start方法 为 start方法  
exports.start = start;  

Router.js

//获取url
var url = require("url");

//入口方法
function route(handle, request, response, postData) {

    //获取url路径 --->端口后面的路径
    var pathname = url.parse(request.url).pathname;

    //判断请求的路径是否有相对应的解决处理方法
    if (typeof handle[pathname] === 'function') {

        //有则执行
        handle[pathname](request,response);

    } else {
        console.log("Error");
        //没有则返回404
        response.writeHead(404, {"Content-Type": "text/plain"});
        response.write("404 Not found");
        response.end();
    }
}

//创建本js的模块route方法 为 route方法
exports.route = route;

requestHandlers.js

//获取 querystring 模块
//可以用querystring模块来解析POST请求体中的参数
var querystring = require("querystring");
var formidable = require("formidable");
var fs = require("fs");
var lib = require("../routes/lib");

//请求处理方法 start
function start(request, response) {
    console.log("Request handler 'start' was called.");

    //设置 代码
    var body =
        '<form action="/upload" method="post">' +
        '<textarea name="name1" rows="10" cols="100"></textarea>' +
        '<textarea name="name2" rows="10" cols="100"></textarea>' +
        '<textarea name="name3" rows="10" cols="100"></textarea>' +
        '<textarea name="name4" rows="10" cols="100"></textarea>' +
        '<input type="submit" value="Submit text" />' +
        '</form>';

    response.writeHead(200, {"Content-Type": "text/html"});
    //输出
    response.write(lib.newBody(body));
    response.end();
}


//请求处理方法 upload
function upload(request, response) {

    //命名上传的数据
    var data = "";
    //监听数据提交事件
    request.addListener("data", function (postDataChunk) {
        //获取postDataChunk 提交的数据
        data += postDataChunk;
        console.log("------------->         " + postDataChunk);
    });

    response.writeHead(200, {"Content-Type": "text/html"});

    //数据提交完成事件
    request.addListener("end", function () {

        //querystring 模块的parse 方法，把所有数据封装成一个 object
        var dataAll = querystring.parse(data);

        //遍历
        for (var i in dataAll) {
            console.log(i + "|" + dataAll[i]);
            data = data + i + "|" + dataAll[i] + "<br>";
        }

        //显示
        response.end(lib.newBody(data));//响应结束
    });

}


function file_img(request, response) {

    response.writeHead(200, {"Content-Type": "text/html"});
    response.end(lib.newBody(
        '<form action="/upload_file" enctype="multipart/form-data" ' +
        'method="post">' +
        '<input type="text" name="title1" placeholder="t1"><br>' +
        '<input type="text" name="title2" placeholder="t2"><br>' +
        '<input type="text" name="title3" placeholder="t3"><br>' +
        '<input type="text" name="title4" placeholder="t4"><br>' +
        '<input type="text" name="title5" placeholder="t5"><br>' +
        '<input type="file" name="upload1" multiple="multiple"><br>' +
        '<input type="file" name="upload2" multiple="multiple"><br>' +
        '<input type="file" name="upload3" multiple="multiple"><br>' +
        '<input type="file" name="upload4" multiple="multiple"><br>' +
        '<input type="file" name="upload5" multiple="multiple"><br>' +
        '<input type="submit" value="Upload">' +
        '</form>'));
}

function upload_file(request, response) {
    //formidable模块提供的IncomingForm函数
    var form = new formidable.IncomingForm();
    //设置文件临时文件路径
    form.uploadDir = "upload"; // project dir

    //保存运行方法
    form.parse(request, function (error, fields, files) {
        if (error) throw error;

        //遍历 非文件数据
        for (var i in fields) {
            console.log(fields[i]);
        }

        //遍历 文件数据
        for (var i in files) {
            //获取文件类型
            var suffix = lib.getImage(files[i].type);
            var size = lib.getSize(files[i].size);
            size ? console.log("超过2M") : console.log("没有超过");
            //判断是否为 image类型 以及是否超过设置大小
            if (suffix == false || size) {
                //删掉临时文件
                fs.unlink("./" + files[i].path);
            } else {
                //是的则把文件保存到newUpload文件夹下
                fs.rename("./" + files[i].path, "./newUpload/" + lib.getRandomName(files[i].type) + suffix, function (e) {
                    if (e)
                        throw e;
                });
            }
        }

        //跳转到 /show 路径
        lib.jumpEnd(response, "/show");

    });
}


//显示一张图片
function show(request, response) {
    fs.readFile("./upload/1457076106649-27.gif", "binary", function (error, file) {
        if (error) {
            response.writeHead(500, {"Content-Type": "text/plain"});
            response.write(error + "\n");
            response.end();
        } else {
            response.writeHead(200, {"Content-Type": "image/png"});
            response.write(file, "binary");
            response.end();
        }
    });
}


//创建本js的模块start方法 为 start方法
exports.start = start;
//创建本js的模块upload方法 为 upload方法
exports.upload = upload;

exports.upload_file = upload_file;

exports.file_img = file_img;

exports.show = show;

lib.js

//获取一个随机名字
function getRandomName() {

    var dateNmae = new Date().getTime();
    var numOutput = new Number(Math.random() * 100).toFixed(0);
    dateNmae = dateNmae + "-" + numOutput;
    return dateNmae;
}

//获取图片后缀，如果非图片则返回 false
function getImage(type) {
    var i = type.indexOf("image/");
    var ret = i < 0 ? false : type.replace("image/", ".");
    return ret;
}

//html方式跳转
function jumpEnd(response, url) {
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write('<script>window.location.href="' + url + '";</script>');
    response.end();
}

//返回一个 测试body
function newBody(body) {
    return '<html>' +
        '<head>' +
        '<meta http-equiv="Content-Type" content="text/html; ' +
        'charset=UTF-8" />' +
        '</head>' +
        '<body>' +
        body +
        '</body>' +
        '</html>';
}

//大小不能超过 2M
var sizeMax = 2;
function getSize(size) {
    sizeMax = sizeMax * 1024 * 1024;
    return size > sizeMax;
}


exports.getRandomName = getRandomName;
exports.getImage = getImage;
exports.jumpEnd = jumpEnd;
exports.newBody = newBody;
exports.getSize = getSize;