从零开始学习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 Select标记中options操作方法集合
Oct 22 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python3 实现口罩抽签的功能
2020/03/11 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
python 5个顶级异步框架推荐
2020/09/09 Python
python实现简单的tcp 文件下载
2020/09/16 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
小学课外阅读总结
2014/07/09 职场文书
环保志愿者活动方案
2014/08/14 职场文书
学习十八大演讲稿
2014/09/15 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
nginx rewrite功能使用场景分析
2022/05/30 Servers