手机版
你好,游客 登录 注册
背景:
阅读新闻

Node.js入门开发指南中文版

[日期:2012-11-01] 来源:Linux社区  作者:Linux [字体: ]

处理文件上传

最后,我们来实现我们最终的用例:允许用户上传图片,并将该图片在浏览器中显示出来。

回到90年代,这个用例完全可以满足用于IPO的商业模型了,如今,我们通过它能学到这样两件事情: 如何安装外部Node.js模块,以及如何将它们应用到我们的应用中。

这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块。它对解析上传的文件数据做了很好的抽象。 其实说白了,处理文件上传“就是”处理POST数据 —— 但是,麻烦的是在具体的处理细节,所以,这里采用现成的方案更合适点。

使用该模块,首先需要安装该模块。Node.js有它自己的包管理器,叫NPM。它可以让安装Node.js的外部模块变得非常方便。通过如下一条命令就可以完成该模块的安装:

npm install formidable

如果终端输出如下内容:

npm info build Success: formidable@1.0.9
npm ok

就说明模块已经安装成功了。

现在我们就可以用formidable模块了——使用外部模块与内部模块类似,用require语句将其引入即可:

var formidable = require("formidable");

这里该模块做的就是将通过HTTP POST请求提交的表单,在Node.js中可以被解析。我们要做的就是创建一个新的IncomingForm,它是对提交表单的抽象表示,之后,就可以用它解析request对象,获取表单中需要的数据字段。

node-formidable官方的例子展示了这两部分是如何融合在一起工作的:

var formidable = require('formidable'),
    http
= require('http'),
    sys
= require('sys');

http
.createServer(function(req, res){
 
if(req.url =='/upload'&& req.method.toLowerCase()=='post'){
   
// parse a file upload
   
var form =new formidable.IncomingForm();
    form
.parse(req,function(err, fields, files){
      res
.writeHead(200,{'content-type':'text/plain'});
      res
.write('received upload:\n\n');
      res
.end(sys.inspect({fields: fields, files: files}));
   
});
   
return;
 
}

 
// show a file upload form
  res
.writeHead(200,{'content-type':'text/html'});
  res
.end(
   
'<form action="/upload" enctype="multipart/form-data" '+
   
'method="post">'+
   
'<input type="text" name="title"><br>'+
   
'<input type="file" name="upload" multiple="multiple"><br>'+
   
'<input type="submit" value="Upload">'+
   
'</form>'
 
);
}).listen(8888);

如果我们将上述代码,保存到一个文件中,并通过node来执行,就可以进行简单的表单提交了,包括文件上传。然后,可以看到通过调用form.parse传递给回调函数的files对象的内容,如下所示:

received upload:

{ fields: { title: 'Hello World' },
  files:
   { upload:
      { size: 1558,
        path: '/tmp/1c747974a27a6292743669e91f29350b',
        name: 'us-flag.png',
        type: 'image/png',
        lastModifiedDate: Tue, 21 Jun 2011 07:02:41 GMT,
        _writeStream: [Object],
        length: [Getter],
        filename: [Getter],
        mime: [Getter] } } }

为了实现我们的功能,我们需要将上述代码应用到我们的应用中,另外,我们还要考虑如何将上传文件的内容(保存在/tmp目录中)显示到浏览器中。

我们先来解决后面那个问题: 对于保存在本地硬盘中的文件,如何才能在浏览器中看到呢?

显然,我们需要将该文件读取到我们的服务器中,使用一个叫fs的模块。

我们来添加/showURL的请求处理程序,该处理程序直接硬编码将文件/tmp/test.png内容展示到浏览器中。当然了,首先需要将该图片保存到这个位置才行。

requestHandlers.js修改为如下形式:

var querystring = require("querystring"),
    fs
= require("fs");

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

 
var body ='<html>'+
   
'<head>'+
   
'<meta http-equiv="Content-Type" '+
   
'content="text/html; charset=UTF-8" />'+
   
'</head>'+
   
'<body>'+
   
'<form action="/upload" method="post">'+
   
'<textarea name="text" rows="20" cols="60"></textarea>'+
   
'<input type="submit" value="Submit text" />'+
   
'</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've sent the text: "+
  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 handle ={}
handle
["/"]= requestHandlers.start;
handle
["/start"]= requestHandlers.start;
handle
["/upload"]= requestHandlers.upload;
handle
["/show"]= requestHandlers.show;

server
.start(router.route, handle);

重启服务器之后,通过访问http://localhost:8888/show,就可以看到保存在/tmp/test.png的图片了。

好,最后我们要的就是:

  • /start表单中添加一个文件上传元素
  • 将node-formidable整合到我们的upload请求处理程序中,用于将上传的图片保存到/tmp/test.png
  • 将上传的图片内嵌到/uploadURL输出的HTML中

 

第一项很简单。只需要在HTML表单中,添加一个multipart/form-data的编码类型,移除此前的文本区,添加一个文件上传组件,并将提交按钮的文案改为“Upload file”即可。 如下requestHandler.js所示:

var querystring = require("querystring"),
    fs
= require("fs");

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

 
var 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="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.");
  response
.writeHead(200,{"Content-Type":"text/plain"});
  response
.write("You've sent the text: "+
  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;

很好。下一步相对比较复杂。这里有这样一个问题: 我们需要在upload处理程序中对上传的文件进行处理,这样的话,我们就需要将request对象传递给node-formidable的form.parse函数。

但是,我们有的只是response对象和postData数组。看样子,我们只能不得不将request对象从服务器开始一路通过请求路由,再传递给请求处理程序。 或许还有更好的方案,但是,不管怎么说,目前这样做可以满足我们的需求。

到这里,我们可以将postData从服务器以及请求处理程序中移除了 —— 一方面,对于我们处理文件上传来说已经不需要了,另外一方面,它甚至可能会引发这样一个问题: 我们已经“消耗”了request对象中的数据,这意味着,对于form.parse来说,当它想要获取数据的时候就什么也获取不到了。(因为Node.js不会对数据做缓存)

我们从server.js开始 —— 移除对postData的处理以及request.setEncoding (这部分node-formidable自身会处理),转而采用将request对象传递给请求路由的方式:

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

function start(route, handle){
 
function onRequest(request, response){
   
var pathname = url.parse(request.url).pathname;
    console
.log("Request for "+ pathname +" received.");
    route
(handle, pathname, response, request);
 
}

  http
.createServer(onRequest).listen(8888);
  console
.log("Server has started.");
}

exports
.start = start;

接下来是 router.js —— 我们不再需要传递postData了,这次要传递request对象:

function route(handle, pathname, response, request){
  console
.log("About to route a request for "+ pathname);
 
if(typeof handle[pathname]==='function'){
    handle
[pathname](response, request);
 
}else{
    console
.log("No request handler found for "+ pathname);
    response
.writeHead(404,{"Content-Type":"text/html"});
    response
.write("404 Not found");
    response
.end();
 
}
}

exports
.route = route;

现在,request对象就可以在我们的upload请求处理程序中使用了。node-formidable会处理将上传的文件保存到本地/tmp目录中,而我们需要做的是确保该文件保存成/tmp/test.png。 没错,我们保持简单,并假设只允许上传PNG图片。

这里采用fs.renameSync(path1,path2)来实现。要注意的是,正如其名,该方法是同步执行的, 也就是说,如果该重命名的操作很耗时的话会阻塞。 这块我们先不考虑。

接下来,我们把处理文件上传以及重命名的操作放到一起,如下requestHandlers.js所示:

var querystring = require("querystring"),
    fs
= require("fs"),
    formidable
= require("formidable");

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

 
var 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" multiple="multiple">'+
   
'<input type="submit" value="Upload file" />'+
   
'</form>'+
   
'</body>'+
   
'</html>';

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

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

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

function show(response){
  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;

好了,重启服务器,我们应用所有的功能就可以用了。选择一张本地图片,将其上传到服务器,然后浏览器就会显示该图片。

总结与展望

恭喜,我们的任务已经完成了!我们开发完了一个Node.js的web应用,应用虽小,但却“五脏俱全”。 期间,我们介绍了很多技术点:服务端JavaScript、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块等等。

当然了,还有许多本书没有介绍到的: 如何操作数据库、如何进行单元测试、如何开发Node.js的外部模块以及一些简单的诸如如何获取GET请求之类的方法。

但本书毕竟只是一本给初学者的教程 —— 不可能覆盖到所有的内容。

幸运的是,Node.js社区非常活跃(作个不恰当的比喻就是犹如一群有多动症小孩子在一起,能不活跃吗?), 这意味着,有许多关于Node.js的资源,有什么问题都可以向社区寻求解答。 其中Node.js社区的wiki以及 NodeCloud就是最好的资源。

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款