UDN-企业互联网技术人气社区

板块导航

浏览  : 853
回复  : 2

[Nodejs] nodejs进阶(4)—读取图片到页面

[复制链接]
王许柔的头像 楼主
发表于 2017-2-6 10:32:25 | 显示全部楼层 |阅读模式
本帖最后由 王许柔 于 2017-2-6 10:43 编辑

  接上篇

  我们先实现从指定路径读取图片然后输出到页面的功能。

  先准备一张图片imgs/dog.jpg。

  file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'。(file.js 在上一篇文章nodejs进阶3-路由处理中有完整的内容)
  1. readImg:function(path,res){
  2.         fs.readFile(path,'binary',function(err,  file)  {
  3.             if  (err)  {
  4.                 console.log(err);
  5.                 return;
  6.             }else{
  7.                 console.log("输出文件");
  8.                     //res.writeHead(200,  {'Content-Type':'image/jpeg'});
  9.                     res.write(file,'binary');
  10.                     res.end();
  11.             }
  12.         });
  13.     }
复制代码

  服务器创建代码如下,注意在发送请求头时需要声明 {'Content-Type':'image/jpeg'}
  1. var  http  =  require('http');  
  2. var  file  =  require('./models/file');  
  3. http.createServer(function  (request,  response)  {  
  4.     //response.writeHead(200,  {'Content-Type':  'text/html;  charset=utf-8'});  
  5.     response.writeHead(200,  {'Content-Type':'image/jpeg'});  
  6.         if(request.url!=="/favicon.ico"){  //清除第2此访问  
  7.         console.log('访问');  
  8.         //response.write('hello,world');//不能向客户端输出任何字节  
  9.         file.readImg('./imgs/dog.jpg',response);  
  10.         //------------------------------------------------  
  11.         console.log("继续执行");  
  12.         //response.end('hell,世界');//end在方法中写过  
  13.     }  
  14. }).listen(8000);  
  15. console.log('Server  running  at  http://127.0.0.1:8000/');
复制代码

  运行后在浏览器里可以看到读取后的图片显示出来
1.png

  当然我们真正应用时并不会这样使用,下面我们在换一种方式调用图片,在html里发送请求图片的方法。
  1. <html>
  2. <head></head>
  3. <body>
  4. 登录:
  5. <p>这是一个段落</p>
  6. <h1>样式1</h1>
  7. <img src="./showImg"></img>
  8. </body>
  9. <html>
复制代码

  我们用login.html继续测试,在里面加入一个img标签,src的值为"./showImg",这样浏览器会发送另外一个请求http://localhost:8000/showImg。

  这样我们在router里面再加入一个方法showImg,在这个方法里面调用file文件里的readImg方法(在本文的第一段代码里)
  1. showImg:function(req,res){
  2.         file.readImg('./imgs/dog.jpg',res);
  3. }
复制代码

  我们运行http://localhost:8000/login
1.png

  下篇

相关帖子

发表于 2017-2-6 10:33:04 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-2-10 17:33:27 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部