从零开始学习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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 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
各种战术和打法的原创者
2020/03/04 星际争霸
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP常用的小程序代码段
2015/11/14 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
中英文求职信范文
2014/01/27 职场文书
体育课外活动总结
2014/07/08 职场文书
水利水电专业自荐信
2014/07/08 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
放飞理想演讲稿
2014/09/09 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript