当前位置： 移动技术网 > IT编程>开发语言>JavaScript > nodejs服务器读取图片返回给前端（浏览器）显示

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

2018年09月08日  | 移动技术网IT编程  | 我要评论

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/', function (req, res) {
   res.sendfile( __dirname + "/" + "/public/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/');
})

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网