从零开始学习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 相关文章推荐
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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
在Windows版的PHP中使用ADO
2006/10/09 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python与Redis的连接教程
2015/04/22 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python实现k-means算法
2018/02/23 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
简单了解Python生成器是什么
2019/07/02 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
2015年元旦文艺汇演主持词
2014/03/26 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
空气的环保标语
2014/06/12 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang