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之请求路由概述
Jul 05 NodeJs
轻松创建nodejs服务器(6):作出响应
Dec 18 NodeJs
搭建简单的nodejs http服务器详解
Mar 09 NodeJs
nodejs开发——express路由与中间件
Mar 24 NodeJs
深入浅析Nodejs的Http模块
Jun 20 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
nodejs实现超简单生成二维码的方法
Mar 17 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
nodejs基础之多进程实例详解
Dec 27 NodeJs
详解nodejs 配置文件处理方案
Jan 02 NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
Oct 25 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 file_exists无效的解决办法
2013/06/26 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
写给女生的道歉信
2014/01/14 职场文书
四年大学自我鉴定
2014/02/17 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
先进班组事迹材料
2014/12/25 职场文书
质量保证书格式
2015/02/27 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
应收账款管理制度
2015/08/06 职场文书
认识实习感想
2015/08/10 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技