1前言
项目需要用nodejs服务器给前端传递图片，网上找了好多资料，多数都是怎么在前端上传图片的，然后通过看runoob.com菜鸟教程，发现其实是非常简单，用express框架就行了。
2代码
2.1 用原生的版本（包含了返回网页功能）
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 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/plainresponse.writeHead(404, {‘Content-Type‘: ‘text/html‘});}else{ // HTTP 状态码: 200 : OK// Content Type: text/plainresponse.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/plainresponse.writeHead(404, {‘Content-Type‘: ‘text/html‘});}else{ // HTTP 状态码: 200 : OK// Content Type: text/plainresponse.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框架版本
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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/‘);}) |
nodejs服务器读取图片返回给前端（浏览器）显示
原文地址：https://www.cnblogs.com/juehai/p/9606511.html