目的：使用Node.js实现文件上传并将上传的文件显示到浏览器中

基本工具：Node.js，在windows下需要下载cygwin64来运行shell命令

文件：服务器模块、请求路由模块、请求处理程序模块、index.js入口文件

步骤：在目录中创建server.js、router.js、requestHandlers、index.js这文件，分别代表以上几个文件。

　　步骤一：在index.js文件中使用require引入以上模块，

const server = require('./server');

const router = require('./router');

const requestHandlers = require('./requestHandlers');

　　接着在index.js文件中需要定义路由,我们首先定义一个handle对象，用于保存路由，然后对应请求处理程序模块中的提供的方法（还没写）

//定义路由

let handle = {};

handle['/'] = requestHandlers.start;

handle['/start'] = requestHandlers.start;

handle['/upload'] = requestHandlers.upload;

handle['/show'] = requestHandlers.show；

　　最后调用引入的服务器模块提供的方法server.start();并传入两个参数，第一个参数是请求路由模块提供的路径方法router.route,第二个参数是用于定义路由的handle对象

server.start(router.route,handle);

　　index.js文件的代码如上

　　步骤二：在请求处理程序模块requestHandlers.js文件中，我们需要引入fs模块用于读取文件，formidable模块用于格式化上传的表单

const fs = require('fs');

const formidable = require('formidable');

　　接着我们来完善之前在index,js文件中对应的方法，在requestHandlers.js文件中，接着写下exports.start方法，这个方法接收一个参数res,届时将在服务器模块中传入该响应参数　　

exports.start = (res)=>{//服务器传入的响应参数

    console.log("Request handler 'start' was called.");

    res.writeHead(200, {"Content-Type": "text/html"});//告诉浏览器文件格式

    let body =

    '<html>'+

        '<head>'+

            '<meta http-equiv="Content-Type" content="text/html; '+

            'charset=UTF-8" />'+

        '</head>'+

           '<body>'+

            '<form action="/upload" enctype="multipart/form-data" method="post">'+//修改文件编码

                '<input type="file" name="upload">'+

                '<input type="submit" value="上传文件" />'+

            '</form>'+

        '</body>'+

        '</html>';

    res.end(body);//响应浏览器，并将body参数传进入

};
exports.upload = (res,req)=>{//对上传的文件进行处理

    console.log("Request handler 'upload' was called.");

    let form = new formidable.IncomingForm();

    //对上传的文件进行处理

    console.log('对上传的文件进行处理');

    form.parse(req,(err,fields,files)=>{

        //上传的文件处理完毕

        console.log('上传的文件处理完毕');

        console.log(files.upload.path);

        fs.renameSync(files.upload.path,"/tmp/test.png");//将路径一的文件保存到路径二

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

        res.end("接收到的图片：</br><img src='/show/'>");

    });

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

//    res.end("You've sent: " + querystring.parse(postData).text);//使用querystring模块获取上传数据中的文本信息

};
exports.show = (res)=>{//从文件中读取数据并显示到页面

    console.log('在页面中显示上传数据的请求已被调用');

    fs.readFile("/img/test.png","binary",(err,file)=>{

        if(err){

            res.writeHead(500,{"Content-Type":"text/plain"});

            res.end(err+'\n');

        }else {

            res.writeHead(200,{"Content-Type":"image/png"});

            res.write(file,"binary");

            res.end();

        }

    });

};

即对应的处理程序做对应的事情

步骤三：在server文件中，引入url模块用于解析地址，获取当前路径，

const url = require('url');

接着创建一个对外提供的start方法，并接收两个参数，route和handle,分别用于处理请求路由和路由对象，在该文件中我们还通过url模块提供的parse().pathname获取到了路径地址，然后调用参数传进来的请求路由方法，并传入路由对象、当前路径、接收到的请求req、响应浏览器的res,最后监听端口

exports.start = (route,handle)=>{

    require('http').createServer((req,res)=>{

            const pathname = url.parse(req.url).pathname;//获取当前路径

            route(handle,pathname,res,req);

            console.log('路径名称:'+pathname);

        }).listen(8888);//监听8888端口

};

步骤四：在router文件中，我们定义一个函数用于该模块提供对外的接口，该函数接收四个参数，路由对象、当前路径、接收到的请求req、响应浏览器的res，在函数中判断当前路径在路由对象中是否存在该函数，如果存在则调用该方法，并传入接收到的请求req、响应浏览器的res两个参数，否则告诉浏览404，页面未找到

exports.route = (handle,pathname,res,req)=>{

    console.log("路径名称 " + pathname);

    if(typeof handle[pathname] === 'function'){//匹配是否有这个请求处理程序

         return handle[pathname](res,req);

    }else{

        console.log("No request handler found for " + pathname);

        res.writeHead(404, {"Content-Type": "text/plain"});

        res.end("404 Not found");

    }

};

总体思路：

要把服务器、路由、请求处理程序分开，最后用index.js文件全部连在一起；

①首先创建单独的服务器处理模块，在模块里面创建一个服务器，并通过请求参数和url模块获取到当前的路径，接着调用一个路径处理函数，这个函数传四个参数，第一个参数是从index.js传入的请求处理函数的一个集合对象，第二个参数是当前路径，第三个参数是req,第四个参数是res，最后监听端口，并将这些代码作为一个函数对外开放以方便index.js引入，并且该函数接受两个参数，第一个参数是路径处理函数，第二个参数是请求处理程序函数的对象，服务器模块完成；

②然后创建路径处理模块，该模块将作为一个函数对外开放，函数接收四个参数，第一个参数是从服务器模块传入的请求处理函数的一个集合对象，第二个参数是从服务器模块传入的路径，第三个参数是req,第四个参数是res，然后进行if判断，将从服务器模块传入的路径作为请求处理函数的一个集合对象的参数，判断是否是function,如果是则调用该请求处理程序并传入req,res；

③接着创建请求处理程序，该模块创建不同的对外开放函数，函数参数接收req,res，根据需求制定不同的请求处理程序；

④最后创建一个index.js文件，该文件引入服务器模块，路径处理模块，请求处理程序模块，接着创建一个空对象，把希望制定的路由作为对象的参数然后将对应的请求处理程序模块对应的程序赋值给该参数，最后调用服务器模块对外开放的函数，并传入两个参数，第一个参数是路径处理模块对外的函数，和新创建的的请求处理函数的集合对象。

源教程自：https://www.nodebeginner.org/index-zh-cn.html

Node.js入门-知识整理的更多相关文章

  1. 让我们一起学习《Node.js入门》一书吧！

    Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...

  2. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  3. 极简 Node.js 入门 - Node.js 是什么、性能有优势？

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  4. 极简 Node.js 入门 - 3.2 文件读取

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  5. 极简 Node.js 入门 - 4.3 可读流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  6. 极简 Node.js 入门 - 4.4 可写流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  7. 极简 Node.js 入门 - 5.1 创建 HTTP 服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  8. 极简 Node.js 入门 - 5.3 静态资源服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  9. Node.js 入门手册：那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

随机推荐

  1. 云数据库将进入企业级百万IOPS时代

    IOPS (Input/Output Operations Per Second),即每秒进行读写(I/O)操作的次数,以衡量存储每秒可接受多少次主机发出的访问.数据库,特别是关系型数据库由于需要处理 ...

  2. php 获取客户端的ip、地理信息、浏览器信息、本地真实ip

    转自:http://www.blhere.com/948.html 这是非常实用的php常用类.获取客户端的ip.地理信息.浏览器信息.本地真实ip 1234567891011121314151617 ...

  3. cocos2d-x 特效集合

    本文转载自:http://www.cnblogs.com/linux-ios/archive/2013/04/09/3009292.html bool HelloWorld::init() { /// ...

  4. 插入blob字段的简单方法

    1. 按普通方法组织插入语句 ,f2为Blob型字段 insert into table (f1,f2,f3) values ('a',:para,'c') 2.对应每个blob型字段,OracleC ...

  5. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...

  6. saltStack_安装和使用

    服务端: yum install -y salt-master 客服端: yum install -y salt-minion 服务端启动: systemctl restartsalt-master ...

  7. php 向数组 首位插入 和 尾部插入

    首位插入: <?php$queue = array("orange", "banana");array_unshift($queue, "app ...

  8. Python--day72--ajax完整版

    来源: AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格 ...

  9. HDU 5974"A Simple Math Problem"（GCD(a,b) = GCD(a+b,ab) = 1）

    传送门 •题意 已知 $a,b$,求满足 $x+y=a\ ,\ LCM(x,y)=b$ 条件的 $x,y$: 其中,$a,b$ 为正整数,$x,y$ 为整数: •题解 关键式子:设 $a,b$ 为正整 ...

  10. 2018-8-10-使用-RetroShare-分享资源

    title author date CreateTime categories 使用 RetroShare 分享资源 lindexi 2018-08-10 19:16:51 +0800 2018-02 ...