node.js读图片和图文一起加载

最新推荐文章于 2021-08-28 13:48:44 发布
最新推荐文章于 2021-08-28 13:48:44 发布
阅读量105 收藏
点赞数
原文链接：http://www.cnblogs.com/yin-dt/p/8059674.html
版权

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();
            }
        });
    
    }
}

　　login.html

<!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

angchisi1289
关注
【Node.js】面试常考问题
zhaohb2016的博客
07-18 1463
1、koa和express有哪些不同？2、两个Node.js进程如何通信？3、浏览器与Node中的事件循环有什么区别？4、如何实现JWT鉴权机制？说说思路5、Node性能如何进行监控以及优化？6、说说对中间件概念的理解，如何封装node中间件？7、Node文件查找的优先级以及require方法的文件查找策略8、Node中stream的理解？应用场景9、Node中的Buffer的理解？场景10、Node中process的理解，常用方法？11、Node有哪些全局对象12、对node的理解，优缺点，应用场景。..
RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。
dengzeyuan的博客
08-23 1591
RequireJS 是一个JavaScript模块加载器，使用RequireJS加载模块化脚本将提高代码的加载速度和质量。而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路由等。不受网络情况影响一直是在angular或者jquery加载之后才加载依赖相关联的模块。 r.js为requireJs自带的一个可以对js和css等进行压缩打包的插件，打包之后可以将所有模块输出
nodejs 读取目录下的图片并以json返回
08-21
nodejs 读取目录下的图片并以json返回
Node.js 读取图片
C.
10-22 1万+
Node.js 读取图片读取图片的时候需要注意response.writeHead()的内容需要改变为：response.writeHead(200,{'Content-Type' : 'image/jpeg'});读取图片的时候，跟读取文件的时候有些不同:var fs = require("fs");module.exports = { readfileSync : function(pat
node.js读取图文页面，同时读取文字，图片
weixin_30294021的博客
05-05 174
版权声明：本文为原创文章，转载请标明出处 一个简单的html页面： login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head&g...
nodejs图片读取
影子
08-28 4841
response返回都是html/text，向前台输出一张图片用的image/jpeg,服务器读取图片的时候是按照binary的二进制方式读取，给客户端返回的时候也按照binary二进制的方式返回。 从服务器读取一张图片给客户端输出： 效果：输入localhost:8003直接显示图片 readImg.js var http=require('http'); var imgFile=require('../module/image.js'); http.createServer(functi.
node.js插件nodeclipse安装图文教程
10-22
由于Node.js和Web的JavaScript都使用.js作为扩展名，Eclipse可能会混淆两个环境的编辑器。Nodeclipse的编辑器可能不会提供HBuilder的语法助手。要解决这个问题： 1. **选择正确的编辑器** - 对于.js文件，右键点击...
Linux下Node.js安装全攻略：图文步骤详解
总结来说，这篇教程通过逐步指导，确保了Linux用户可以在其系统上正确安装和配置Node.js，为后续开发JavaScript应用提供了基础环境。遇到问题时，作者鼓励读者提问，并对读者的支持表达了感谢。
Nodejs读取图片
kill -9
06-13 5328
fs_read.js var fs = require("fs"); module.exports = { readfileSync: function (path) {//同步读取 var data = fs.readFileSync(path, 'utf-8'); console.log(data); console.log("同...
nodejs学习篇（2）-读取显示图片路由方式
weixin_45127183的博客
06-05 1010
通常我们开发项目的时候都要用到图片，那么nodejs是如何读取图片的呢？ 我们来看一下，因为一个网页中图片的数量是不确定的，而我们不能每一张图片都去写它的src路径，这时候最好的方法就是写一个专门读取图片的路由，通过路由加载图片，这样既快捷又方便我们的理解。 文件目录： 我要加载的图片在index页面 注：问号？前面部分表示路由，问号后面才是图片的路径（现对于服务器文件，我的是first_se...
Node.js 读取二进制图片
殇莫忆的博客
06-07 1万+
一、流程（需要注意）：1、读取文件IMG、GPEG的方式2、读取文件的时候，拿到图片，用二进制的格式读取进来，向客户端发送的时候也要用二进制的格式，浏览器才能够根据这种方式来生成一张图片，那么在发送的过程中，response不能发送其它任何的字符串或者其它的信息，如果发送了，将会破坏二进制数据流的完整性，导致图片显示不出来。二、代码 -- 读取图片并输出1、optfilevar fs= req...
nodejs读取图片并将二进制数据转换成base64格式
现在学习也不晚
03-04 1万+
首先，使用nodejs进行数据读取，需要用到nodejs的fs模块进行数据读取： fs.readFile('你的资源路径','binary',function(err,data){ if(err){ console.log(err) }else{ console.log('数据读取成功'); } }); 读取到当前的文件数据以后，我们还需要...
nodejs读取并且展示图片
这天有点热的博客
10-31 6659
var http = require('http'); var url = require('url'); var router = require("./router"); http.createServer(function(request,response){ response.writeHead(200,{'contet-Type':'text/html;charset=ut...
nodejs读取图片返回给浏览器显示
热门推荐
学知不足，业精于勤。
06-21 3万+
本文主要是使用nodejs处理图片等资源返回给浏览器显示方法，但不只限制于图片，也可以是音频视频等其他非字符串文件的返回和显示。也可以扩展成nodejs静态资源服务器的开发方法。
前端渲染引擎doT.js解析
一个有情怀的程序猿博客
07-04 2584
背景 前端渲染有很多框架，而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化，而归根到底是功能划分逻辑的演变：MVC—>MVP—>MVVM（忽略最早混在一起的写法，那不称为模式）。近几年兴起的React、Vue、Angular等框架都属于MVVM模式，能帮我们实现界面渲染、事件绑定、路由分发等复杂功能。但在一些只需完成数据和模板简单渲染的场合，它们就显得笨重而且学习成本较高了。 例如，在美团外卖的开发实践中，前端经常从后端接口取得长串的数据，这些数据拥有相同的样式模板，前端需要..
html怎么引入dot.js,dot.js的运用（初来乍到前端版）
weixin_42494890的博客
06-16 235
一、dot.js的运用方法(非本人，很详细到位)二、个人用法dot.js在我眼中是个模板引擎，因为项目中经常会用到排版，例如下面两张图片，有模板嵌套的话，就很方便。个人用法之图一：首先看一下我的JSON接口传来的数据，我格式化了一下，我截取了2条在前端获取JSON数据里，我用的是ajax异步获取(我用的是apicloud,所以用他的获取方法，道理都是一样的)因为是异步处理，我们把需要处理的内容放在...
nodejs中图片上传，读取，预览
u010603896的专栏
07-03 6616
提供一个类似相册的功能模块，具体需求： 相册列表，新建相册，删除相册，点击进入相册，照片导入，照片删除，显示 我的做法是完全映射为文件的处理，即模拟一个简单浏览器端的文件管理系统（除导入外） 其中涉及到的知识： 1.nodejs文件操作（fs模块） 2.nodejs文件上传 nodejs文件操作 读取文件夹： fs.readdir(dest, function(e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值