从零开始学习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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Python与R语言的简要对比
2017/11/14 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python字符串三种格式化输出
2020/09/17 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python实现简单文件读写函数
2021/02/25 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
婚礼答谢宴主持词
2014/03/14 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
化学教育专业自荐信
2014/07/04 职场文书
青年联谊会致辞
2015/07/31 职场文书
校园安全主题班会
2015/08/12 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
创业计划书之服装
2019/10/07 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS