NodeJS 后端返回Base64格式数据显示图片 ⑩⑨ (一篇就够了)

news2024/10/7 14:23:10

文章目录

  • ✨文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持😘
  • 前言
  • Base64
  • 前端
  • 服务器
  • 总结


✨文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持😘

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

前言

  1. Node.js是一个javascript运行环境。它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与```PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
  2. Nodejs是基于V8引擎,V8是Google发布的开源JavaScript引擎,本身就是用于Chrome浏览器的JS解释,但是Node之父 Ryan Dahl在这里插入图片描述把这V8搬到了服务器上,用于做服务器的软件。

Base64

当需要储存图片到数据库时可以把图片转成Base64储存到数据库

前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

<body>
    <img src="" style="width: 500px;height: 500px;" alt="">
</body>

<script>
    const img = document.querySelector('img')
    console.log(img);
    axios({
        method: 'get',
        url: 'http://127.0.0.1:8000/getImgPath',
    }).then(reason => {
        const data = JSON.parse(reason.data.data)
        console.log('data:image/png;base64,' + data);
        const imgData = 'data:image;base64,' + data
        img.src = imgData
    })
</script>

</html>

服务器

const express = require('express')
const app = express()
const fs = require('fs')
const path = require('path')
require('./config/db.config')

const savePath = path.join(__dirname, '/infinity-2911976.png')
let imageData = fs.readFileSync(savePath)
// 转成 base64
let imageDataToBase64 = imageData.toString('base64')

app.get('/getImgPath', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.send({
        data: JSON.stringify(imageDataToBase64)
    })
})

app.listen(8000, () => {
    console.log("服务器启动成功...");
})

总结

以上是个人学习Node的相关知识点,一点一滴的记录了下来,有问题请评论区指正,共同进步,这才是我写文章的原因之,如果这篇文章对您有帮助请三连支持一波

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/717776.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java语法小记】求字符串中某个字符的数量——IntStream流的使用

文章目录 引入需求代码原理解读s.chars()IntStream filter​(IntPredicate predicate)long count()补充&#xff1a;IntStream peek​(IntConsumer action) 流操作和管道 引入需求 从一段代码引入 return s.length() - (int) s.chars().filter(c -> c S).count(); 其中 (…

文心一言 VS 讯飞星火 VS chatgpt (54)-- 算法导论6.2 6题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;53&#xff09;-- 算法导论6.2 5题 六、证明:对一个大小为 n的堆&#xff0c;MAX-HEAPIFY 的最坏情况运行时间为 Ω(Ign)。(提示对于n个结点的堆&#xff0c;可以通过对每个结点设定恰当的值&#xff0c;使得从根结点到叶结点路径…

2023年房地产投资退出途径研究报告

第一章 房地产投资概况 房地产&#xff08;Real Estate&#xff09;是一个涵盖了土地及其上的永久性建筑&#xff08;如建筑物和房屋&#xff09;和自然资源&#xff08;如矿产&#xff0c;水源&#xff0c;作物&#xff09;的经济学概念。它可以分为四类&#xff1a;住宅房地…

大数据面试题-场景题

1.手写Flink的UV 手写Flink的UV 2.Flink的分组TopN Flink的分组TopN 3.Spark的分组TopN 1&#xff09;方法1&#xff1a; &#xff08;1&#xff09;按照key对数据进行聚合&#xff08;groupByKey&#xff09; &#xff08;2&#xff09;将value转换为数组&#xff0c;利…

2023如何自学网络安全

自学网络安全可以按照以下步骤进行&#xff1a; 学习基础知识&#xff1a;开始之前&#xff0c;建议先学习计算机网络和操作系统的基础知识&#xff0c;了解网络通信的原理和常见的网络攻击方式。可以通过阅读相关的书籍、在线教程或参加网络安全相关的课程来学习。 学习网络安…

Sanic、uvloop及Asyncio的局限

Sanic sanic使用基于libuv的uvloop事件循环替代python asnycio自带的事件循环替代&#xff0c;以此提高异步性能。Flask和Django是同步框架&#xff0c;Tornado、FastApi和Sanic均为异步框架&#xff0c;Sanic的性能最好。Sanic入门教程&#xff1a;Sanic&#xff1a;一款号称…

阶段小作业:基于docker安装mysql

1.在docker hub 搜索Mysql镜像 docker search --limit 5 Mtsql 2.拉取Mysql 5.7 镜像 docker pull mysql 注意mysql是小写哦 3.创建mysql容器&#xff0c;主机3306端口号映射到容器3306端口 docker run -d -p 3306:3306 --privilegedtrue -v /tmp/mysql/log:/var/log/mysql …

OpenVRLoader 与UnityXR Interaction ToolKit不兼容

1、游戏的VR设备监听与输入都是基于UnityXR,但是当接入OpenVRLoader 时无法正常通过Openvr_xr_plugin去获取设备的输入输出。 2、Openxr 和OpenVRLoader同时打开也还是会没有输入信息。 3、我们需要修改com.unity.xr.interaction.toolkit插件代码,不能直接用packmanage的将插…

从零开始的职场攻略,我是如何成为优秀活动策划的?

想要提升活动策划能力&#xff0c;成为活动操盘手&#xff0c;除了避免踩坑之外&#xff0c;你还需要额外掌握以下 4 项能力。当你持续向着这几个方向提高的时候&#xff0c;你可以感受到作为活动策划带来的成就感&#xff0c;甚至你的整个职业生涯都能够因此迎来一个飞跃。 1…

突破数据边界,开启探索之旅!隐语开源Meetup一周年专场7月22日上海见

小伙伴们&#xff0c;&#x1f4e2;「隐语开源一周年 Meetup 」即将来袭&#xff01;&#x1f389;在一周年 Meetup 上&#xff0c;不仅会对隐语 1.0 版本进行详解&#xff0c;还有新鲜出炉的隐语 MVP 部署体验包&#xff0c;让你秒变高手&#xff01;更有机会与隐私计算行业的…

10年软件测试工程师感悟——写给还在迷茫的朋友

这两天和朋友谈到软件测试的发展&#xff0c;其实软件测试已经在不知不觉中发生了非常大的改变&#xff0c;前几年的软件测试行业还是一个风口&#xff0c;随着不断地转行人员以及毕业的大学生疯狂地涌入软件测试行业&#xff0c;目前软件测试行业“缺口”已经基本饱和。当然&a…

若依前端项目理解

官网&#xff1a;RuoYi 一、目录结构 一级目录&#xff1a;通过vue3.0及以后版本创建的项目文件 二级目录&#xff08;src文件&#xff09;&#xff1a; ruoyi-ui&#xff08;前端文件夹&#xff09; bin文件夹&#xff08;批处理文件&#xff0c;打包、运行&#xff09; bui…

k8s部署springboot

前言 首先以SpringBoot应用为例介绍一下k8s的部署步骤。 1.从代码仓库下载代码&#xff0c;比如GitLab&#xff1b; 2.接着是进行打包&#xff0c;比如使用Maven&#xff1b; 3.编写Dockerfile文件&#xff0c;把步骤2产生的包制作成镜像&#xff1b; 4.上传步骤3的镜像到远程…

MySql基础知识及数据查询

目录 第一章 数据库概述 1.为什么要学习数据库&#xff1f; 2.数据库的相关概念 3.ORM(Object Relational Mapping)思想 4.表与表的记录之间存在哪些关联关系 第二章 基本的SELECT语句 1.SQL的分类 2. SQL基本规则 3.导入现有的数据表、表的数据 4.最基本的…

全网最牛,打通接口自动化测试框架详细,一篇足够

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 接口自动化测试开…

原型设计用得最多的是PS吗?该如何画原型?

在产品开发的前期工作中&#xff0c;产品经理或设计师通常需要进行原型设计工作&#xff0c;创建一个可交互和可视化的原型&#xff0c;以更准确地表达他们的设计构思和想法&#xff0c;并为项目顺利递交给开发人员做好准备。进行原型设计时&#xff0c;使用设计工具来画原型图…

计算机常识

文章目录 1. 计算机存储单位换算2. 为什么我买的256内存&#xff0c;实际不足256内存&#xff1f;3. 32位和64位操作系统支持内存 1. 计算机存储单位换算 1Byte 8bit 1KiB 1024 Byte 1MiB 1024 KiB 1048576 Byte 1GiB 1024 MiB 1TiB 1024 GiB 2. 为什么我买的256内存&a…

2023.07.04 homework

到高中前&#xff0c;大多数都还算可以&#xff0c;大多数娃娃主要还是兴趣和学习细节问题

SciencePub学术 | 计算机综合类重点SCIE征稿中

SciencePub学术 刊源推荐: 计算机综合类重点SCI&EI征稿中&#xff01;进展顺利、极速录用。信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 计算机综合重点SCIE 【期刊简介】IF&#xff1a;1.0-1.5&#xff0c;JCR4区&#xff0c;中科院4区&#xf…

Neighborhood Contrastive Learning for Novel Class Discovery (CVPR 2021)

Neighborhood Contrastive Learning for Novel Class Discovery (CVPR 2021) 摘要 在本文中&#xff0c;我们解决了新类发现(NCD)的问题&#xff0c;即给定一个具有已知类的有标签数据集&#xff0c;在一组未标记的样本中揭示新的类。我们利用ncd的特性构建了一个新的框架&am…