从零开始学习Node.js系列教程三:图片上传和显示方法示例


Posted in Javascript onApril 13, 2017

本文实例讲述了Node.js图片上传和显示方法。分享给大家供大家参考,具体如下:

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

server.js

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(3000);
 console.log("Server has started.");
}
exports.start = start;

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();
  form.uploadDir = "D:\\min\\nodejsExample2\\tmp";
  console.log("about to parse1");
  form.parse(request, function(error, fields, files) {
    console.log("parsing done");
    console.log(files.upload.path);
    fs.renameSync(files.upload.path, "D:\\min\\nodejsExample2\\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("D:\\min\\nodejsExample2\\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;

router.js

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;

result:

从零开始学习Node.js系列教程三:图片上传和显示方法示例

从零开始学习Node.js系列教程三:图片上传和显示方法示例

从零开始学习Node.js系列教程三:图片上传和显示方法示例

知识点:

其中用到了fs模块的readFile读取文件,它有同步和异步两个版本。node.js中,并不是所有的API都提供了异步和同步版本,node.js不鼓励使用同步I/O。

//this is async 异步
/*
 fs.readFile调用时所做的工作只是将异步式I/O请求发送给了操作系统,然后立即返回并执行后面的语句,执行完以后进入事件循环监听事件。
 当fs接收到I/O请求完成的事件时,事件循环会主动调用回调函数以完成后续工作。
 */
var fs = require('fs');
fs.readFile('file.txt', 'utf-8', function(err, data){
  if (err){
    console.error(err);
  } else {
    console.log(data);
  }
});
//this is sync 同步
var fs = require('fs');
var data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);
console.log('end.');

希望本文所述对大家nodejs程序设计有所帮助。

Javascript 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
js function使用心得
May 10 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
利用JS实现数字增长
Jul 28 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 #Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 #Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 #Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 #Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 #Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 #Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 #Javascript
You might like
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
建筑设计专业求职自我评价
2014/03/02 职场文书
五一口号
2014/06/19 职场文书
个人求职自荐信范文
2014/06/20 职场文书
采购员岗位职责范本
2015/04/07 职场文书
公司老总年会致辞
2015/07/30 职场文书