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

})