nodeJs学习过程之一个图片上传显示的例子

目标

1. 在浏览器地址栏输入“http://demos/start”，进入欢迎页面，页面有一个文件上传表单；

2. 选择一张图片并提交表单，文件被上传到"http://demos/uploads"上传完成把该图片显示在页面上。

功能模块分解

1. 需要提供欢迎页，所以需要一个http服务器；

2. 对于不同请求，根据url，服务器能给与不同响应，需要路由，把请求对应到相应的请求处理程序（request handler）

3. 需要请求处理程序；

4. 路由处理post数据，并把数据封装成更加友好的格式传递给处理程序，需要数据处理功能；

5. 需要视图逻辑供请求处理程序使用，以便将结果返回给浏览器；

6. 需要上传处理功能处理上传细节。

如果是php实现，我们需要apache http服务器并配置mod_php5模块，那么整个“接收请求并回复“并不需要php来做。而使用nodejs，不仅仅是实现应用，同时还实现了http服务器。

一个基础的http服务器

nodejs支持模块化，有利于编写干净的代码。除了内置的模块，我们可以将自己的不同功能的代码放进不同模块中，说白了就是写在不同文件中。

创建js文件取名server.js，写入代码如下：

var http = require('http');

http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.write('<h1>Node.js</h1>');
res.end("");
}).listen(3000,'127.0.0.1');

node server.js

浏览器输入"http://localhost:3000"，显示”Node.js“。

服务器简单分析

第一行，require请求nodejs内置的http模块，赋给http变量；接着调用http模块的createServer方法，返回一个对象，这个对象有一个叫做listen的方法，这个方法的参数指定http服务器监听的端口号。createServer方法的匿名函数是该方法仅仅需要的一个参数，js中函数和变量一样可以传递。

使用这种方式是因为nodejs是事件驱动的。

当我们使用php时，任何时候每当有请求进入，apache就为这一新请求新建一个进程，并从头到尾的执行php脚本。htpp.createServer不仅仅是建一个侦听某端口的服务器，我们还想要他在收到http请求时做点什么。而nodejs是异步的：请求任何时候都可能到达，但是他却跑在一个单进程中。

当一个请求到达3000端口时怎么控制流程呢？这时候nodejs/javascript的事件驱动机制派上用场了。

我们向创建服务器的方法传递了一个函数，任何时候服务器收到请求，这个函数就会被调用，被用作处理请求的的地方。

服务器如何处理请求

当服务器加收请求回调的匿名函数被触发的时候，有两参数传入：request和response。利用这两个对象的方法处理请求的细节，并返回应答。

使用response.writeHead()发送一个http状态200和http头的内容类型等，使用response.write()在响应主体中发送文本，而使用response.end()完成应答。

封装为模块：

var http = require('http');

function serverStart(){
http.createServer(function(req,res){
console.log('http request recieve');

res.writeHead(200,{'Content-Type':'text/html'});
res.write('<h1>Node.js</h1>');
res.end("");
}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

第一行http是内置的模块，这里封装了我们自己的模块，通过关键字exports露出接口方法，模块名为该文件名server，之后”server模块“可以被其他模块引用。

创建index.js文件，写入代码并引用server模块：

var server = require("./server");

server.serverStart();

对请求进行路由选择

为路由提供请求的url和其他GET和POST参数，路由根据这些数据来分发请求到具体的处理程序。因此，我们需要查看并解析http请求，提取出url和get/post参数，暂且将这一解析功能归于http服务器一部分。请求数据都包含在request对象中，引入内置模块url和querystring来解析它。

var http = require('http');
var url = require('url');

function serverStart(){
http.createServer(function(req,res){
var pathname = url.parse(req.url).pathname;
console.log('http request for '+pathname+' recieved');

res.writeHead(200,{'Content-Type':'text/html'});
res.write('<h1>Node.js</h1>');
res.end("");
}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

通过第6行的解析，不同的请求路径在第7行输出不同的pathname。

建立一个名为router.js的文件，编写路由代码如下：

function route(pathname){
console.log('about to route a request for'+pathname);
}

exports.route = route;

服务器应该知道路由的存在，并加以组合有效地利用。这里可以采用硬编码方式或依赖注入的方式实现组合，后者更好。

改造server.js如下：

var http = require('http');
var url = require('url');

function serverStart(route){
http.createServer(function(req,res){
var pathname = url.parse(req.url).pathname;
console.log('http request for '+pathname+' recieved');

route(pathname);

res.writeHead(200,{'Content-Type':'text/html'});
res.write('<h1>Node.js</h1>');
res.end("");
}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

改造index.js如下：

var server = require("./server");
var router = require("./router");

server.serverStart(router.route);

编译运行，可看到路由模块被server模块引入。

行为驱动执行

在index中，我们将router对象传递进去，服务器随后调用这个对象的route函数。但其实服务器自身并不需要这个对象，它只是需要执行某个动作，而这个动作由该对象来完成。具体的细节服务器并不关心，因为这是执行这个动作的那个对象的事。这就是函数式编程。但归根结底，到了最后一层总有一个对象是真正关心细节并完成细节，输出结果的。像现实世界的上级把任务给下级，下级给再下级，最终总要有人完成这个任务才好！

路由到处理程序

路由用来转发请求，将请求分发给实际的处理程序，让他们解决请求并回复，因此新建请求处理模块requestHandlers.js，代码如下：

function start(){
console.log("request handler 'start' was called");
}

function upload(){
console.log("request handler 'upload' was called");
}

exports.start = start;
exports.upload = upload;

有了这个模块，路由就有路可寻了。

现在需要将处理程序通过一个对象来传递并将对象注入到route()函数中，而javascript的对象是”key:value“组合，满足我们的需要。将存放处理程序的对象引入index，如下：

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handler = {};
handler['/'] = requestHandlers.start;
handler['/start'] = requestHandlers.start;
handler['/upload'] = requestHandlers.upload;

server.serverStart(router.route,handler);

路径为”/“或"/start"的请求由start处理，"/upload"由upload处理。

将该对象作为参数传给服务器，server.js模块代码改为：

var http = require('http');
var url = require('url');

function serverStart(route,handle){
http.createServer(function(req,res){
var pathname = url.parse(req.url).pathname;
console.log('http request for ''+pathname+'' recieved');

route(handle,pathname);

res.writeHead(200,{'Content-Type':'text/html'});
res.write('<h1>Node.js</h1>');
res.end("");
}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

handle对象传递给了route，此时还得修改router模块，如下：

function route(handle,pathname){
console.log('about to route a request for'+pathname);

if(typeof handle[pathname] === 'function'){
handle[pathname]();
}
else{
console.log('no request handler found for'+pathname);
}
}

exports.route = route;

首先检查对应的处理程序是否存在，存在则直接调用相应的函数，否则提示没有找到对应的函数。这时，服务器，路由，处理程序就联系在一起了。

让请求处理程序作出响应

web程序一般是基于http的请求-应答模式，这样服务器和浏览器可以实现通话。

一种不好的实现方式

这种方式让服务器的函数直接返回展示给用户的信息。这就需要同时修改服务器、路由、请求处理函数的部分代码：

requestHandlers.js

function start(){
console.log("request handler 'start' was called");
return "hello start!";
}

function upload(){
console.log("request handler 'upload' was called");
return "hello upload!";
}

exports.start = start;
exports.upload = upload;

requestHandlers.js

function route(handle,pathname){
console.log('about to route a request for'+pathname);

if(typeof handle[pathname] === 'function'){
return handle[pathname]();
}
else{
console.log('no request handler found for'+pathname);
return "404 not found!"
}
}

exports.route = route;

server.js

var http = require('http');
var url = require('url');

function serverStart(route,handle){
http.createServer(function(req,res){
var pathname = url.parse(req.url).pathname;
console.log('http request for '+pathname+' recieved');

res.writeHead(200,{'Content-Type':'text/html'});
var content = route(handle,pathname);
res.write(content);
res.end("");
}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

这样的模式运行的也很好，但当有请求处理程序需要执行非阻塞操作，就“挂”了。

阻塞与非阻塞

修改requestHandlers.js

function start(){
console.log("request handler 'start' was called");

function sleep(milliSeconds){
var startTime = new Date().getTime();
while(new Date().getTime() < startTime + milliSeconds)
;
}

sleep(10000);
return "hello start!";
}

function upload(){
console.log("request handler 'upload' was called");
return "hello upload!";
}

exports.start = start;
exports.upload = upload;

上述的sleep函数会让方法停顿10秒，然后才会返回结果。实际场景中，需要计算或是查找数据库等阻塞操作非常多。

现在通过start和upload即可模拟阻塞，打开两个空白页面分别输入“localhost:3000/start”和"localhost:3000/upload"，先进行start请求在快速切换到量以页面进行upload请求，发现start页面请求恢复用了10秒，而upload也用了10秒。原因是，start中的sleep阻塞了所有其他处理。

而nodejs的特性之一是——单线程，可以在不增加线程情况下，对任务进行并行处理。这里的机制是它使用轮询(event loop)来实现并行操作，所有尽量避免阻塞操作而是用非阻塞操作。要使用非阻塞，需要使用回调，将函数作为参数传递给其他需要费时间处理的函数。

对于nodejs可以形象比喻成“嘿，probablyExpensiveFunction()（需要费时间处理的函数），继续做你的事情，我（nodejs线程）先不等你了，继续去处理后面的代码，请你提供一个回调callBackFunction()，等你处理完了我会去调用该回调函数的。”

一种错误的非阻塞方式

requestHandlers.js

var exec = require("child_process").exec;

function start(){
console.log("request handler 'start' was called");
var content = "empty";

exec("ls-lah",function(error,stdout,stderr){
content = stdout;
});
return content;
}

function upload(){
console.log("request handler 'upload' was called");
return "hello upload!";
}

exports.start = start;
exports.upload = upload;

引入另一个模块“child_process”，实现非阻塞操作exec()。

exec()的作用是从nodejs执行一个shell命令，例子中使用它获取当前目录下所有文件("ls-lah")，然后当start请求时将文件信息输出到浏览器。执行该例子，浏览器输出“empty”。原因在于，nodejs是同步执行，而为了非阻塞，exec()使用了回调函数，回调函数作为参数传递给exec(),而exec()是异步操作，即当他还没来得及执行回调，nodejs的同步性致使nodejs执行了exec()的下一个语句，这时候content并没有等来exec()的赋值，因此他还是“empty”。这和javascript中的同步异步很相像，每当需要执行ajax，并且需要ajax的结果时，我们将下一步的代码放在ajax执行成功时的回调里。

非阻塞方式对请求进行响应

我们可以采用值传递的方式将请求处理函数返回的内容再回传给http服务器。上述方式都是将请求处理函数的结果返回给http服务器，而另一种方式是将服务器传递给内容，即将response对象传递给请求处理程序，程序随后采用该对象上的方法对对请求进行响应。

server.js

var http = require('http');
var url = require('url');

function serverStart(route,handle){
http.createServer(function(req,res){
var pathname = url.parse(req.url).pathname;
console.log('http request for '+pathname+' recieved');

route(handle,pathname,res);

}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

以上将server.js中有关response的函数调用全部移除，将response对象传给route。

router.js

function route(handle,pathname,response){
console.log('about to route a request for'+pathname);

if(typeof handle[pathname] === 'function'){
return handle[pathname](response);
}
else{
console.log('no request handler found for'+pathname);
response.writeHead(404,{"Content-Type":"text/plain"});
response.write("404 not found!");
response.end();
}
}

exports.route = route;

requestHandlers.js

var exec = require("child_process").exec;

function start(response){
console.log("request handler 'start' was called");

exec("ls-lah",function(error,stdout,stderr){
response.writeHead(200,{"Content-Type":"text/plain"});
response.write(stdout);
response.end();
});

}

function upload(response){
console.log("request handler 'upload' was called");

response.writeHead(200,{"Content-Type":"text/plain"});
response.write("hello upload");
response.end();
}

exports.start = start;
exports.upload = upload;

处理程序接收response对象，由该对象做出直接响应。在此编译，打开浏览器请求，“localhost:3000/start”不会对"localhost:3000/upload"造成阻塞。

更有用的场景

处理post请求

var exec = require("child_process").exec;

function start(response){
console.log("request handler 'start' was called");

var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+
'<input type="submit" value="submit"/>'+'</form></body></html>';

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

}

function upload(response){
console.log("request handler 'upload' was called");

response.writeHead(200,{"Content-Type":"text/plain"});
response.write("hello upload");
response.end();
}

exports.start = start;
exports.upload = upload;

以上是修改后的requestHandlers.js，运行后是个简单的表单，包括文本域和提交按钮。post数据有时候会很大，为使过程不阻塞，nodejs会将post数据拆分成很多很小的数据块，然后通过触发特定的事件，将这些小数据块传给回调函数。特定事件有data（表示新的小数据块到了）和end（表示所有数据块都已经接收完毕）。这时候我们需要告诉nodejs事件触发的时候调用哪些回调函数，通过什么方式告诉呢？在request对象上注册监听器（listener）来实现。获取所有来自请求端的数据并将数据传给应用层处理，是http服务器的事。所以直接在server里处理post数据，然后将最终的数据传给路由和请求处理器，让他们来进一步处理。

server.js

function serverStart(route,handle){
http.createServer(function(req,res){
var postData = "";
var pathname = url.parse(req.url).pathname;
console.log('http request for '+pathname+' recieved');

request.setEncoding("utf8");

request.addListener("data",function(postDataChunk){
postData += postDataChunk;
console.log('received post data chunk'+postDataChunk+".");
});

request.addListener("end",function(postDataChunk){
route(handle,pathname,res,postData);
});

}).listen(3000,'127.0.0.1');

console.log('http server start on port 3000');
}

exports.serverStart = serverStart;

上述代码做了3件事，首先设置接收数据格式为utf8，然后绑定data事件的监听器，用于接收每次传递的新数据块，复制给postData，最后将路由调用移到end中，确保数据接收完成在触发并且只触发一次。

requestHandlers.js

var querystring = require("querystring");
function start(response,postData){
console.log("request handler 'start' was called");

var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+
'<input type="submit" value="submit"/>'+'</form></body></html>';

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

}

function upload(response,postData){
console.log("request handler 'upload' was called");

response.writeHead(200,{"Content-Type":"text/plain"});
response.write("you are sent:"+querystring.parse(postData).text);
response.end();
}

exports.start = start;
exports.upload = upload;

通过querystring筛选出我们感兴趣的部分，以上就是关于post数据处理的内容。

处理文件上传

处理文件上传就是处理post数据，有时候麻烦的是细节处理。所以这里使用现成的方案，即外部模块node-formidable，用nmp命令安装：

nmp install formidable

该模块做的就是通过http post请求提交的表单，在nodejs中可以被解析。我们创建一个IncomingForm，它是对提交的表单的抽象表示，之后就可以用他来解析request对象，获取需要的字段数据。关于该模块具体信息及工作原理，其官网有实例。

现在的问题是保存在本地硬盘的内容如何显示在浏览器中。我们需要将其读取到服务器，使用fs模块完成。

var querystring = require("querystring"),
fs = require("fs");
function start(response,postData){
console.log("request handler 'start' was called");

var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+
'<input type="submit" value="submit"/>'+'</form></body></html>';

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

}

function upload(response,postData){
console.log("request handler 'upload' was called");

response.writeHead(200,{"Content-Type":"text/plain"});
response.write("you are sent:"+querystring.parse(postData).text);
response.end();
}

function show(response,postData){
console.log("request handler 'show' was called");
fs.readFile("/tmp/test.png","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();
}
});
}

exports.start = start;
exports.upload = upload;
exports.show = show;

将其添加到index.js的路由映射表中：

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handler = {};
handler['/'] = requestHandlers.start;
handler['/start'] = requestHandlers.start;
handler['/upload'] = requestHandlers.upload;
handler['/show'] = requestHandlers.show;

server.serverStart(router.route,handler);

编译，浏览器请求即可看见图片。

最后，

需要在/start表单添加文件上传元素

将formidable整合到upload中用于将上传的图片保存到指定路径

将上传的图片内嵌到/upload url输出的html中

第一项，移除此前的文本区，添加上传组件和“multipart/form-data”编码类型：

var querystring = require("querystring"),
fs = require("fs"),
formidable = require("formidable");
function start(response){
console.log("request handler 'start' was called");

var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post" enctype="multipart/form-data">'+
'<input type="file" name="upload"/><input type="submit" value="upload file">'+'</form></body></html>';

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

}

function upload(response,postData){
console.log("request handler 'upload' was called");

var form = new formidable.IncomingForm();
form.parse(request,function(error,fields,files){
fs.renameSync(file.upload.path,"/tmp/test.png");
response.writeHead(200,{"Content-Type":"text/html"});
response.write("image:</br>");
response.write("<image src='/show'/>");
response.end();
});

}

function show(response,postData){
console.log("request handler 'show' was called");
fs.readFile("/tmp/test.png","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();
}
});
}

exports.start = start;
exports.upload = upload;
exports.show = show;

View Code
好，编译，重启浏览器。选择本地图片，上传并显示！

结构图如下：

该实例有关的技术点：

服务器端javascript

函数式编程

阻塞与非阻塞

单线程

回调

事件

nodejs模块

没有介绍到的还有数据库操作、单元测试、开发外部模块等。

注：本文摘抄自《nodejs入门》