nodejs服务器读取图片返回给前端(浏览器)显示
1 前言
项目需要用nodejs服务器给前端传递图片,网上找了好多资料,多数都是怎么在前端上传图片的,然后通过看runoob.com菜鸟教程,发现其实是非常简单,用express框架就行了。
2 代码
2.1 用原生的版本(包含了返回网页功能)
var http = require('http'); var fs = require('fs'); var url = require('url'); // 创建服务器 http.createServer( function (request, response) { // 解析请求,包括文件名 var pathname = url.parse(request.url).pathname; // 输出请求的文件名 console.log("Request for " + pathname + " received."); // 从文件系统中读取请求的文件内容 fs.readFile(pathname.substr(1), function (err, data) { var urlContent = pathname.substr(1); if(urlContent.lastIndexOf("png") > -1){ if (err) { console.log(err); // HTTP 状态码: 404 : NOT FOUND // Content Type: text/plain response.writeHead(404, {'Content-Type': 'text/html'}); }else{ // HTTP 状态码: 200 : OK // Content Type: text/plain response.writeHead(200, {'Content-Type': 'image/png'}); var imageFilePath = pathname.substr(1); var stream = fs.createReadStream( imageFilePath ); var responseData = [];//存储文件流 if (stream) {//判断状态 stream.on( 'data', function( chunk ) { responseData.push( chunk ); }); stream.on( 'end', function() { var finalData = Buffer.concat( responseData ); response.write( finalData ); response.end(); }); } } }else if(urlContent.lastIndexOf("html") > -1){ if (err) { console.log(err); // HTTP 状态码: 404 : NOT FOUND // Content Type: text/plain response.writeHead(404, {'Content-Type': 'text/html'}); }else{ // HTTP 状态码: 200 : OK // Content Type: text/plain response.writeHead(200, {'Content-Type': 'text/html'}); // 响应文件内容 response.write(data.toString()); } // 发送响应数据 response.end(); }else{ console.log("unSupport Type, Please contact Administrator err url="+urlContent); } }); }).listen(80);
2.2 用Express框架版本
var express = require('express'); var app = express(); app.use(express.static('public')); app.get('/public/images/*', function (req, res) { res.sendFile( __dirname + "/" + req.url ); console.log("Request for " + req.url + " received."); }) app.get('/public/html/index.html', function (req, res) { res.sendFile( __dirname + "/" + "/public/html/index.html" ); console.log("Request for " + req.url + " received."); }) //如果访问网页和本地同名,可以使用以下版本 app.get('/public/html/*.html', function (req, res) { res.sendFile( __dirname + "/" + req.url ); console.log("Request for " + req.url + " received."); }) app.get('/public/register', function (req, res) { res.sendFile( __dirname + "/" + "/public/html/register.html" ); console.log("Request for " + req.url + " received."); }) var server = app.listen(80, function () { console.log('Server running at http://127.0.0.1:80/'); })