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学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
Windows系统下使用Sublime搭建nodejs环境
Apr 13 NodeJs
nodejs修复ipa处理过的png图片
Feb 17 NodeJs
Nodejs全局安装和本地安装的不同之处
Jul 04 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
详解nodejs微信公众号开发——3.封装消息响应模块
Apr 10 NodeJs
详解nodejs微信公众号开发——5.素材管理接口
Apr 11 NodeJs
nodejs对express中next函数的一些理解
Sep 08 NodeJs
NodeJs通过async/await处理异步的方法
Oct 09 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
深入理解NodeJS 多进程和集群
Oct 17 NodeJs
nodejs使用node-xlsx生成excel的方法示例
Aug 22 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 fread()使用技巧
2010/01/22 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
js遍历td tr等html元素
2012/12/13 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python基础教程项目三之万能的XML
2018/04/02 Python
TensorFlow的权值更新方法
2018/06/14 Python
浅谈django orm 优化
2018/08/18 Python
Python异常的检测和处理方法
2018/10/26 Python
python 实现生成均匀分布的点
2019/12/05 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
硕士研究生个人求职信
2013/12/04 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
倡议书范文大全
2015/04/28 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
商业计划书范文
2019/04/24 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
java版 联机五子棋游戏
2022/05/04 Java/Android