通常我们开发项目的时候都要用到图片,那么nodejs是如何读取图片的呢?

我们来看一下,因为一个网页中图片的数量是不确定的,而我们不能每一张图片都去写它的src路径,这时候最好的方法就是写一个专门读取图片的路由,通过路由加载图片,这样既快捷又方便我们的理解。

文件目录:



我要加载的图片在index页面



注:问号?前面部分表示路由,问号后面才是图片的路径(相对于服务器文件),我的是first_server.js文件

1、在自己定义的目录下新建服务器文件

我的是:

first_server.js

var http=require('http');
var url=require('url');
var router=require('./module/router');
http.createServer(function (request,response) {
response.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
if (request.url!=='/favicon.ico'){//清除二次访问
var path=url.parse(request.url).pathname;//获取当前路径
if(path==='/')path='/index';
path=path.substr(1);//获取去掉根符号‘/’的当前路径
router[path](request,response);//路由,path是一个变量,如login、register、index
}
}).listen(5200);//端口号为5200

解释:两次path的值不一样,



if(path==='/')path='/index'的作用是如果访问的时候没有输入路径,则默认进入index页面



: router[path]必须是在路由模块里面定义过的才行,不然会出现找不到报错



2、编写路由模块(router.js)

var url = require('url');
var optfile=require('./optfile');//导入自定义模块要加路径'./'
module.exports={
readImg:function(req,res){
optfile.readImg(req,res);
},
index:function(req,res){
optfile.index('./file/index.html',res);
}
}

3、编写操作文件(optfile.js)

var fs = require('fs');
function recall(res,data,ext){
if (!ext)ext='html';//默认输出格式为HTML
res.writeHead(200, {'Content-Type': 'text/'+ext+';charset=utf-8'});
res.end(data);//向浏览器输出取得的数据
}
module.exports={
readImg:function (req,res) {
var path=req.url.split('?')[1];
var data = fs.readFile(path,'binary',function (err,data) {
if (!err){
res.writeHead(200, {'Content-Type': 'image/jpeg'});//输出类型
res.write(data,'binary');//二进制方式
}else {
res.end('err');
}
})
},
index:function (path,res) {
var data = fs.readFile(path,function (err,data) {
if (!err){
data=data.toString();
recall(res,data);
}else {
res.end('err');
}
})
}
};

因为图片在nodejs中是以二进制的形式传输的,所以文件输出要加‘binnary’表示二进制输出.

req.url相当于request.url表示取得当前请求的路径,这里表示图片的全部路径,

req.url.split('?')表示将取得的路径字符串用?拆分成数组,

req.url.split('?')[1]表示取字符串的?号后面部分,即图片的相对路径

不明白的可以看下面,我console一下:





运行结果:

node学习(2)-路由读取图片的更多相关文章

  1. 【学习笔记】tensorflow图片读取

    目录 图像基本概念 图像基本操作 图像基本操作API 图像读取API 狗图片读取 CIFAR-10二进制数据读取 TFRecords TFRecords存储 TFRecords读取方法 图像基本概念 ...

  2. opencv学习之路(3)、批量读取图片、视频分解、视频合成

    一.批量有序读取图片 #include<opencv2/opencv.hpp> using namespace cv; void main() { //批量读取图片(有序) ]; ]; M ...

  3. Node学习(二) --使用http和fs模块实现一个简单的服务器

    1.创建一个www目录,存储静态文件1.html.1.jpg. * html文件内容如下: 12345678910111213 <html lang="en">< ...

  4. nodejs进阶(4)—读取图片到页面

    我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...

  5. nodeJS基础08:读取图片

    1.读取图片 //server.js var http = require("http"); var readImage = require("./readImage&q ...

  6. C#(WinForm)上传图片保存到数据库和从数据库读取图片显示到窗体

    //浏览图片 private void btnUp_Click(object sender, EventArgs e) { OpenFileDialog ofd = new OpenFileDialo ...

  7. [python3.6+opencv] 01 完成读取图片操作

    学习一下opencv3 奈何vs2017配的云里雾里,还是使用python吧 --人生苦短,python来凑 --使用Pycharm操作,面向界面的Pycharm好一些吧(我猜的) 新建Project ...

  8. Node学习HTTP模块(HTTP 服务器与客户端)

    Node学习HTTP模块(HTTP 服务器与客户端) Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端.http.Server 是一个基 ...

  9. opencv图像处理时使用stringstream批量读取图片,处理后并保存

    简介: 同文件输入输出流一样,使用stringstream可以批量读取图片,处理后并进行保存.因为C++中头文件 stringstream既可以从string读数据也可向string写数据,利于其这个 ...

随机推荐

  1. python做简易记事本

    以下内容参考<辛星tkinter教程第二版>: from tkinter import * from tkinter.filedialog import * from tkinter.me ...

  2. html5--2.5新的布局元素(4)-aside/nav

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  3. 使用同一个目的port的p2p协议传输的tcp流特征相似度计算

    结论: (1)使用同一个目的port的p2p协议传输的tcp流特征相似度高达99%.如果他们是cc通信,那么应该都算在一起,反之就都不是cc通信流. (2)使用不同目的端口的p2p协议传输的tcp流相 ...

  4. Ajax动态切换按钮

    function changeAjax(str, obj) { var idx = $(obj).parent().parent().index(); if(confirm('确定执行操作么?')) ...

  5. L3-007 天梯地图(30 分)

    本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至少存在一条可达路线. 输 ...

  6. 「UVA1636」Headshot(概率

    题意翻译 你有一把枪(左轮的),你随机装了一些子弹,你开了一枪,发现没有子弹,你希望下一枪也没有子弹,你是应该直接开一枪(输出"SHOOT"),还是先转一下,再开一枪(输出&quo ...

  7. select查询语句执行顺序

    查询中用到的关键词主要包含六个,并且他们的顺序依次为select--from--where--group by--having--order by其中select和from是必须的,其他关键词是可选的 ...

  8. bzoj 2865 字符串识别 —— 后缀数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2865 唯一出现的子串就是每个后缀除去和别的后缀最长的 LCP 之外的前缀: 所以用这个更新一 ...

  9. hdu 1521 排列组合 —— 指数型生成函数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1521 标准的指数型生成函数: WA了好几遍,原来是多组数据啊囧: 注意精度,直接强制转换(int)是舍去小 ...

  10. C语言单精度浮点型转换算法

    文章来源:http://blog.csdn.NET/educast/article/details/8522818 感谢原作者. 关于16进制浮点数对于大小为32-bit的浮点数(32-bit为单精度 ...