nodejs读取图片返回给浏览器显示


Posted in NodeJs onJuly 25, 2019

本文主要是使用nodejs处理图片等资源返回给浏览器显示方法,但不只限制于图片,也可以是音频视频等其他非字符串文件的返回和显示。也可以扩展成nodejs静态资源服务器的开发方法。

请求头说明

在http响应里面有几个重要的东西,Content-Type 说明文件渲染MIME类型,这是我们本文的相关处理关键。

常用的MIME类型

{
 "css": "text/css",
 "gif": "image/gif",
 "html": "text/html",
 "ico": "image/x-icon",
 "jpeg": "image/jpeg",
 "jpg": "image/jpeg",
 "js": "text/javascript",
 "json": "application/json",
 "pdf": "application/pdf",
 "png": "image/png",
 "svg": "image/svg+xml",
 "swf": "application/x-shockwave-flash",
 "tiff": "image/tiff",
 "txt": "text/plain",
 "wav": "audio/x-wav",
 "wma": "audio/x-ms-wma",
 "wmv": "video/x-ms-wmv",
 "xml": "text/xml"
}

处理方法

一、静态返回资源

原理:

使用node.js的fs.readFile来处理。根据请求地址,转换成实际的文件地址。判断文件是否存在,不存在返回404,存在则读取文件 ,并返回文件

//设置请求的返回头type,content的type类型列表见上面
response.setHeader("Content-Type", contentType);
//格式必须为 binary 否则会出错
var content = fs.readFileSync(url,"binary"); 
response.writeHead(200, "Ok");
response.write(content,"binary"); //格式必须为 binary,否则会出错
response.end();

二、动态文件流处理

原理:

使用nodejs 的fs.createReadStream来处理,这样处理的好处是断点续传。

response.set( 'content-type', mimeType );//设置返回类型
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();
 });
}

1.客户端读取文件 var content = fs.createReadStream(filePath);
2.把内容转为数组 var buffer = new Buffer(content); 传给 httpServer这一步需要特别注意,一定不能把 content 当成普通的字符串处理传给 httpServer
3.httpServer 解析出数组 var list = …
4.httpServer 把数组转为 Buffer, var buffer = new Buffer(list);
5.返回 response.write(buffer.toString(),”binary”); //注意,这里必须转为字符串,不能以 Buffer 传给浏览器.
6.值得注意的是,这里的 buffer 不能直接返回给客户端,nodejs 以 binary 格式读取的文件就是一个字符串,只是编码不是普通的 utf-8

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
跟我学Nodejs(一)--- Node.js简介及安装开发环境
May 20 NodeJs
nodejs 中模拟实现 emmiter 自定义事件
Feb 22 NodeJs
nodejs学习笔记之路由
Mar 27 NodeJs
nodejs入门教程五:连接数据库的方法分析
Apr 24 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
Nodejs 和Session 原理及实战技巧小结
Aug 25 NodeJs
nodejs实现超简单生成二维码的方法
Mar 17 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 NodeJs
nodejs使用node-xlsx生成excel的方法示例
Aug 22 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 NodeJs
关于NodeJS中的循环引用详解
Jul 23 #NodeJs
typescript nodejs 依赖注入实现方法代码详解
Jul 21 #NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 #NodeJs
nodejs二进制与Buffer的介绍与使用
Jul 11 #NodeJs
nodejs中各种加密算法的实现详解
Jul 11 #NodeJs
监控Nodejs的性能实例代码
Jul 02 #NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 #NodeJs
You might like
php array的学习笔记
2012/05/10 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
深入理解React高阶组件
2017/09/28 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python配平化学方程式的方法
2019/07/20 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
判断单链表中是否存在环
2012/07/16 面试题
一体化教学实施方案
2014/05/10 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
门店业绩提升方案
2014/06/08 职场文书
公司年底活动方案
2014/08/17 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
java版 联机五子棋游戏
2022/05/04 Java/Android
mysql函数之截取字符串的实现
2022/08/14 MySQL