NodeJs【自學筆記】2

NodeJs 自學筆記2

實現 表單提交 和 文件上傳

表單提交：

• 獲取輸入數據

文件上傳：

• 多文件上傳
• 驗證上傳文件格式
• 驗證上傳文件大小

目錄結構：

![結構](https://img-blog.csdn.net/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;