nodejs上传图片并展示

效果图

服务模块

var http = require("http");

var url = require("url");

function start(route,handle){

function onRequest(request,response){

var pathname = url.parse(request.url).pathname;

if (pathname != "/favicon.ico") {

console.log("Request for" + pathname + " received");

route(handle,pathname,response,request);

}

}

http.createServer(onRequest).listen(8888);

console.log("Server has started");

}

exports.start = start;

路由模块

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/plain"});

response.write("404 not found");

response.end();

}

}

exports.route = route;

请求处理模块

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();

console.log("about to parse");

form.parse(request, function(error, fields, files) {

console.log("parsing done");

var readStream = fs.createReadStream(files.upload.path);

var writeStream=fs.createWriteStream("./tmp/test.png");

readStream.pipe(writeStream);

readStream.on(‘end‘,function(){

fs.unlinkSync(files.upload.path);

});

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("./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;

index.js

var server = require("./server");

var router = require("./route");

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);

访问:http://localhost:8888/start

时间: 2024-10-29 19:10:02

nodejs上传图片并展示的相关文章

nodejs上传图片模块做法;

服务端代码: 1 var express = require('express'); 2 var swig = require('swig'); 3 //1.引入multer模块 4 var multer = require('multer'); 5 var fs = require('fs'); 6 var path = require('path'); 7 var redis = require('./modules/redis'); 8 9 var app = express(); 10

Win7搭建NodeJs开发环境以及HelloWorld展示—图解

Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第一步:安装NodeJs运行环境.第二步:安装WebStrom开发工具.第三步:创建并运行NodeJs项目展示Hello world! 1.下载nodejs 地址:http://nodejs.org/ 点击安装完成,然后安装“组件”,如图: 2.安装WebStrom,导入nodejs开发插件 下载地址:http://www.jetbrains.com/webstorm

移动端微信公众号开发中问题记录及解决方案

1. 关于字体大小.图片大小.块元素大小的确定,目前一种方法,使用rem,rem的计算方式 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10.8 + 'px'; 其中10.8是设计图的大小除以100,这样就可以直接用设计图中的大小除以100的值. px, em, 和rem的区别: a. px是相对于显示器屏幕分辨率而言的. b. em是相对于对象内文本的字体尺寸,如果当前行内文本

《node入门》学习

node入门原书地址:https://www.nodebeginner.org/index-zh-cn.html node入门,循序渐进讲了javascript,node的回调和一些api的应用,很清晰,翻译也很给力.最终是一个例子,可以上传图片以及展示. 最后例子,遇到了麻烦,运行报错 可见零时文件已经创建 代码如下 1 function upload(response, request){ 2 console.log("Request handler 'upload' was called.

使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统

说到Web爬虫,Python占了半壁江山.但是Web页面不是Python的强项了,如果需要扒取Web数据,再Mashup出来一个自己的系统,全端JS是个不错的解决方案(其实不用Python扒数据是因为我只能熟练掌握Python的HelloWorld编写). 那么开始做了. 00.要做一只麻雀 想做一个五脏俱全的系统先设计一下结构吧.思路是要扒数据先要配置怎么扒,然后去把扒来的数据处理成想要的东西,再然后存起来慢慢蹂躏.来张UML活动图压压惊.数据CRUD和如何展现不在设计图中,这部分打算做一个类

Django 后台上传图片前端无法展示

Django admin 实现后台上传文件并在前端展示 1. 首先在model里定义属性: head_img = models.ImageField(u'图片',upload_to='img') 2. 修改settings.py, MEDIA_ROOT = 'statics/' MEDIA_URL = '/' 前端添加 "/static/" 3. 数据库对应实体的表中添加head_img字段,这个只是用来保存文件路径的. 4. 上面配置代表的意思大概是: 上传图片到:web程序目录/s

NodeJs+http+fs+request+cheerio 采集,保存数据,并在网页上展示(构建web服务器)

目的: 数据采集 写入本地文件备份 构建web服务器 将文件读取到网页中进行展示 目录结构: package.json文件中的内容与上一篇一样:NodeJs+Request+Cheerio 采集数据 request :https://github.com/request/request 使得请求变得更容易,简单 cheerio:https://github.com/cheeriojs/cheerio 用来解析dom结构,类似jQuery,挺好用 app.js文件: /** * 数据采集 * 写入

Element-ui上传图片按顺序展示

背景 不知道你上传图片的时候有没有过这样的情况,批量上传多张图片,可能因为图片大小或者网络问题,导致图片返回的顺序和上传时的顺序不一样.因为我们公司是做电商的,即使我们的支持拖动排序,运营还是希望图片能够严格的按照他们上传的顺序展示. 解决问题 在上传组件的on-success的方法中,有3个参数 response, file, fileList 其中fileList就是之前上传成功图片的集合,且upload组件提供了clearFiles方法,用来清空fileList,每次上传成功,我们调用cl

NodeJs表单上传图片文件

最近开始学习Nodejs,刚好有一个小需求拿来练手.实现一个简单的图片服务器. 我这里使用了Express框架. 在调试过程中发现表单从浏览器端Post数据到nodejs服务器后,发生异常错误.如下图: 错误的写法如下: 于是就上网查询了一番,最终解决方案如下: 希望有遇到相同错误的同学可以借鉴.