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 Post请求报socket hang up错误的解决办法
Sep 25 NodeJs
nodejs中简单实现Javascript Promise机制的实例
Dec 06 NodeJs
windows下安装nodejs及框架express
Aug 07 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
基于html5和nodejs相结合实现websocket即使通讯
Nov 19 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
ubuntu编译nodejs所需的软件并安装
Sep 12 NodeJs
nodejs简单访问及操作mysql数据库的方法示例
Mar 15 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
NVM安装nodejs的方法实用步骤
Jan 16 NodeJs
Sublime Text3 配置 NodeJs 环境的方法
May 20 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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
纯php生成随机密码
2015/10/30 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js 目录列举函数
2008/11/06 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python对json的相关操作实例详解
2017/01/04 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
安全检查管理制度
2014/02/02 职场文书
政治学求职信
2014/06/03 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
导游词之千岛湖
2019/09/23 职场文书
七年级作文之环保作文
2019/10/17 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
PHP遍历数组的6种方式总结
2021/11/17 PHP
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python