zoukankan      html  css  js  c++  java
  • node学习(2)-路由读取图片

    通常我们开发项目的时候都要用到图片,那么nodejs是如何读取图片的呢?
    我们来看一下,因为一个网页中图片的数量是不确定的,而我们不能每一张图片都去写它的src路径,这时候最好的方法就是写一个专门读取图片的路由,通过路由加载图片,这样既快捷又方便我们的理解。
    文件目录:
    image.png
    我要加载的图片在index页面
    image.png
    注:问号?前面部分表示路由,问号后面才是图片的路径(相对于服务器文件),我的是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的值不一样,
    image.png
    if(path==='/')path='/index'的作用是如果访问的时候没有输入路径,则默认进入index页面
    image.png
    : router[path]必须是在路由模块里面定义过的才行,不然会出现找不到报错
    image.png
    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一下:
    在这里插入图片描述
    在这里插入图片描述
    运行结果:
    image.png

  • 相关阅读:
    [CF1475F] Unusual Matrix
    [JXOI2018] 游戏
    [ZJOI2010] 排列计数
    [CF1474E] What Is It?
    [CF375D] Tree and Queries
    [CF519E] A and B and Lecture Rooms
    [CF321C] Ciel the Commander
    [CF1C] Ancient Berland Circus
    [CF321A] Ciel and Robot
    [CF1450C1] Errich-Tac-Toe (Easy Version)
  • 原文地址:https://www.cnblogs.com/xyyl/p/10981656.html
Copyright © 2011-2022 走看看