首页
所有分类
TAGS
文字工具 EMOJI BIBLE
服务器 NodeJs

轻松创建nodejs服务器（10）：处理上传图片

Posted in NodeJs onDecember 18, 2014

本节我们将实现，用户上传图片，并将该图片在浏览器中显示出来。

这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块。它对解析上传的文件数据做了很好的抽象。

要安装这个外部模块，需在cmd下执行命令：

npm install formidable

如果输出类似的信息就代表安装成功了：
npm info build Success: formidable@1.0.14

安装成功后我们用request将其引入即可：
var formidable = require(“formidable”);

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

本文案例的图片文件存储在 /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;

接下来，我们要完成第二步，我们从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，这次要传递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。

接下来，我们把处理文件上传以及重命名的操作放到一起，如下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;

做到这里，我们的服务器就全部完成了。

在执行图片上传的过程中，有的人可能会遇到这样的问题：

轻松创建nodejs服务器（10）：处理上传图片

照成这个问题的原因我猜测是由于磁盘分区导致的，要解决这个问题就需要改变formidable的默认零时文件夹路径，保证和目标目录处于同一个磁盘分区。

我们找到requestHandlers.js的 upload函数，将它做一些修改：

function upload(response, request) { 

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

 var form = new formidable.IncomingForm(); 

 console.log("about to parse");

 

 form.uploadDir = "tmp";

 

 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(); 

 }); 

}

我们增加了一句 form.uploadDir = “tmp”，现在重启服务器，再执行上传操作，问题完美解决。

轻松创建nodejs服务器（10）：处理上传图片

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

NodeJs 相关文章推荐
nodejs中exports与module.exports的区别详细介绍
Jan 14 NodeJs
nodejs实现黑名单中间件设计
Jun 17 NodeJs
我的NodeJs学习小结（一）
Jul 06 NodeJs
nodejs批量修改文件编码格式
Jan 22 NodeJs
NodeJs中的VM模块详解
May 06 NodeJs
Nodejs实战心得之eventproxy模块控制并发
Oct 27 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
Apr 11 NodeJs
深入理解nodejs中Express的中间件
May 19 NodeJs
nodejs async异步常用函数总结（推荐）
Nov 17 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
一文秒懂nodejs中的异步编程
Jan 28 NodeJs
轻松创建nodejs服务器（10）：处理POST请求
Dec 18 #NodeJs
轻松创建nodejs服务器（7）：阻塞操作的实现
Dec 18 #NodeJs
轻松创建nodejs服务器（8）：非阻塞是如何实现的
Dec 18 #NodeJs
轻松创建nodejs服务器（9）：实现非阻塞操作
Dec 18 #NodeJs
轻松创建nodejs服务器（6）：作出响应
Dec 18 #NodeJs
轻松创建nodejs服务器（5）：事件处理程序
Dec 18 #NodeJs
轻松创建nodejs服务器（4）：路由
Dec 18 #NodeJs
Spring Bean(1) Switch(1) cmd(1) 慢日志(1) 远程桌面(2) REST(1) Spring JPA(1) openEuler(1) exists(2) mt-swipe(1)
You might like
MySQL数据库转移，access，sql server 转 MySQL 的图文教程
2007/09/02 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
javascript 写类方式之五
2009/07/05 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python常见排序算法基础教程
2017/04/13 Python
python 用下标截取字符串的实例
2018/12/25 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
.NET概念性的面试题
2012/02/29 面试题
团代会主持词
2014/04/02 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
篮球赛口号
2014/06/18 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书