nodejs服务器读取图片返回给前端(浏览器)显示


 

 

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/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框架版本

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM