从零开始学习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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python 多线程应用介绍
2012/12/19 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python实现贪吃蛇游戏
2020/03/21 Python
Python3最长回文子串算法示例
2019/03/04 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python基于property()函数定义属性
2020/01/22 Python
Python内存映射文件读写方式
2020/04/24 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
实习单位推荐信范文
2013/11/27 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
导游的职业规划书范文
2013/12/27 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
挂职个人工作总结
2015/03/05 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python