node.js读图片和图文一起加载-CSDN博客

nj_readImg.js

var  http  =  require('http');  
var  optfile  =  require('./model/openfile');  
http.createServer(function  (request,  response)  {  
    //response.writeHead(200,  {'Content-Type':  'text/html;  charset=utf-8'});  
    response.writeHead(200,  {'Content-Type':'image/jpeg'});  //这里的类型是image/jpeg
        if(request.url!=="/favicon.ico"){  //清除第2此访问  
        console.log('访问');  
        //response.write('hello,world');//不能向客户端输出任何字节  
        optfile.readImg('./imgs/1.jpg',response);  
        //------------------------------------------------  
        console.log("继续执行");  
        //response.end('hell,世界');//end在方法中写过  
    }  
}).listen(8000);  
console.log('Server  running  at  http://127.0.0.1:8000/');

　　openfile.js

var  fs=  require('fs');//node自带的类
module.exports={
   
      readImg:function(path,res){
        fs.readFile(path,'binary',function(err,  file)  {//主要这里的‘binary’
            if  (err)  {
                console.log(err);
                return;
            }else{
                console.log("输出文件");
                    //res.writeHead(200,  {'Content-Type':'image/jpeg'});
                    res.write(file,'binary');//这里输出的是一个二进制的文件流
                    res.end();
            }
        });
    
    }
}

　这里网站请求http://localhost:8000/readFile 就可以读出图片

但是这个代码里面只能读二进制，不能写任何的字符串，否则会报错的

------------------------------------------------------------------------------------------------

当我们需要加载一个html中有文字和图片的时候就需要改造一下路由器的请求方式

　nj_html.js

var  http  =  require('http');  
var url = require('url');
var  router = require('./model/router');

http.createServer(function  (request,  response)  {  
    
       if(request.url!=="/favicon.ico"){ 
        var pathname = url.parse(request.url).pathname;//获取路径名称
      pathname = pathname.replace(/\//,""); //正则去掉/
      router[pathname](request,response);//根据路径名称获取到函数从而调用函数
  }
}).listen(8000);  
console.log('Server  running  at  http://127.0.0.1:8000/');

roter.js 中写一个闭包方法

var openfile = require('./openfile');

function  getRecall(req,res){
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});  
    function  recall(data){
        res.write(data);
        res.end('');//不写则没有http协议尾
    }
    return  recall;
}

module.exports={
    login:function(req,res){
        recall = getRecall(req,res);//单独写一个闭包方法 
 	 	openfile.readfile('./view/login.html',recall);
     
    },
    zhuce:function(req,res){
        recall = getRecall(req,res);
 		openfile.readfile('./view/zhuce.html',recall);
     
    },
    
	showimg:function(path,res){
		res.writeHead(200,{'Content-Type':'image/jpeg'}); //图片加载的请求头
		 openfile.readImg('./imgs/1.jpg',res); 
	}

}

　　openfile.js

var  fs=  require('fs');//node自带的类
module.exports={
    readfile:function(path,recall){          //异步执行
        fs.readFile(path,  function  (err,  data)  {
            if  (err)  {
              console.log(err);
            }else{
              console.log(data.toString());
              recall(data);
            }
        });
    },

    readImg:function(path,res){//图片加载的方法
        fs.readFile(path,'binary',function(err,  file)  {
            if  (err)  {
                console.log(err);
                return;
            }else{
                console.log("输出文件");
                    //res.writeHead(200,  {'Content-Type':'image/jpeg'});
                    res.write(file,'binary');
                    res.end();
            }
        });
    
    }
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	登入页面
<img src="./showimg">
</body>
</html>

　　网页请求http://localhost:8000/login

程序会先加载login.html 当加载到img的时候会再次请求showimg的方法在加载图片

转载于:https://www.cnblogs.com/yin-dt/p/8059674.html