前端获取blob文件格式的两种格式

第一种,后台传递给前台是base64格式的JSON数据

这时候前台拿到base64格式的数据可以通过内置的atob解码方法结合new Uint8Arraynew Blob方法转换成blob类型的数据格式,然后可以使用blob数据格式进行操作,虽然base64转换成blob要经过很多步骤,但幸运的是这些步骤都是固定的,因此可以写成一个公共的函数

function base64ToBlob(base64) {let decoded = atob(base64);return new Blob([new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0)))],{ type: "application/octet-stream" });}

示例:

<script>let btn2 = document.querySelector(".btn2");btn2.addEventListener("click", function () {axios.get("http://127.0.0.1:3001/blob").then((res) => {console.log(res.data.data);let base64Data = res.data.data;let decoded = atob(base64Data);let imageBlob = new Blob([new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0)))],{ type: "application/octet-stream" });console.log("imageBlob", imageBlob);let url = URL.createObjectURL(imageBlob);let img = document.createElement("img");img.src = url;document.body.appendChild(img);});});
</script>

第二种,后台传递给前台的直接是二进制数据

注意,这里传递的需要直接是二进制数据才行,不能是JSON数据.

像nodejs中直接将读取到的Excel二进制数据返回,不要返回一个JSON.因为这要跟前台的axios请求进行配合.

fs.readFile(path.resolve(__dirname, "../resource/test.xlsx"), (err, data) => {if (err) {res.status(500).send(err);return;} else {res.send(data);}});

前台使用axios的添加一个参数responseType: "blob",这样可以直接拿到一个blob类型的数据.

let btn2 = document.querySelector(".btn2");
btn2.addEventListener("click", function () {axios({url: "http://127.0.0.1:3001/blob",method: "get",responseType: "blob",}).then((res) => {let blob = res.data;let url = URL.createObjectURL(blob);let img = document.createElement("img");img.src = url;document.body.appendChild(img);});

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

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

相关文章

Ubuntu22.04手动安装fabric release-2.5版本

这个过程稍微有点复杂&#xff0c;但完整操作完成以后会对Fabric网络有更加深入的理解&#xff0c;方便后续自己手动搭建Fabric网络。这个过程需要手动逐个下载Fabric源代码、使用命令下载Fabric镜像和用Git下载例子程序。 Fabric源代码主要用途是用来编译cryptogen、configtx…

科普文:Linux系统安全加固指南

本指南仅关注安全性和隐私性&#xff0c;而不关注性能&#xff0c;可用性或其他内容。 列出的所有命令都将需要root特权。以“$”符号开头的单词表示一个变量&#xff0c;不同终端之间可能会有所不同。 选择正确的Linux发行版 选择一个好的Linux发行版有很多因素。 避免分发…

redis的使用场景

目录 1. 热点数据缓存 1.1 什么是缓存&#xff1f; 1.2 缓存的原理 1.3 什么样的数据适合放入缓存中 1.4 哪个组件可以作为缓存 1.5 java使用redis如何实现缓存功能 1.5.1 需要的依赖 1.5.2 配置文件 1.5.3 代码 1.5.4 发现 1.6 使用缓存注解完成缓存功能 2. 分布式锁…

【Python Web】Flask扩展开发指南

Flask是一个轻量级的Python Web框架&#xff0c;它提供了丰富的扩展库和工具&#xff0c;可以帮助开发者快速构建Web应用。本篇博客将介绍如何进行Flask扩展开发&#xff0c;包括扩展的创建、配置、使用等方面的内容。 目录 Flask扩展开发指南 一、Flask扩展简介 二、创建Fl…

【算法】字典序最小的 01 字符串

字典序最小的 01 字符串 题目描述 小红有一个 01 字符串&#xff0c;她可以进行最多 k 次提作&#xff0c;每次操作可以交换相邻的两个字符&#xff0c;问可以得到的字典序最小的字符串是什么。 输入描述 第一行包含两个整数&#xff0c;n&#xff08;1 < n < 10^5&a…

原子操作类(持续更新,未完结)

目录 基本类型原子类数组类型原子类引用类型原子类对象的属性修改原子类原子操作增强类LongAdder 高性能原理说明LongAdder源码深度解析LongAdder小总结 相关文献 分组来给大家讲解相关原子类的常用api使用&#xff0c;不会全部都讲完&#xff0c;只是抽取几个比较经典的讲一下…

stable diffusion文生图代码解读

使用diffusers运行stable diffusion&#xff0c;文生图过程代码解读。 只按照下面这种最简单的运行代码&#xff0c;省略了一些参数的处理步骤。 from diffusers import DiffusionPipeline pipeline DiffusionPipeline.from_pretrained(MODEL_PATH , torch_dtypetorch.float1…

openjdk导出文件时报空指针异常--casesby 字体

参考链接&#xff1a; https://blog.adoptopenjdk.net/2021/01/prerequisites-for-font-support-in-adoptopenjdk/ http://www.shadow-li.com.cn/alpine-jdk-font-null/ 报错信息 stackTrace : "cn.afterturn.easypoi.exception.excel.ExcelExportException: Excel导出错…

c++树(三)重心

目录 重心的基础概念 定义&#xff1a;使最大子树大小最小的点叫做树的重心 树的重心求解方式 例题&#xff1a; 重心的性质 性质1&#xff1a;重心点的最大子树大小不大于整棵树大小的一半。 性质1证明&#xff1a; 性质1的常用推导 推导1&#xff1a; 推导2&#x…

AI绘画SD中 ControlNet 组件 IP-Adapter 实现风格迁移,AI绘画垫图神器!

大家好&#xff0c;我是画画的小强 今天给大家介绍一下AI绘画SD中ControlNet 的 IP-Adapter 组件&#xff0c;该组件可以方便快捷的帮我们对图片的风格进行迁移&#xff0c;简而言之就是可以参考你放置的图片风格来生成其他图片。 它的效果和reference only有点类似&#xff…

了解网络是如何运作

“Web 的工作原理”提供了一个简化的视图,用于了解在计算机或手机上的 Web 浏览器中查看网页时发生的情况。 这个理论对于短期内编写 Web 代码来说并不是必需的,但不久之后,你就会真正开始从理解后台发生的事情中受益。 客户端和服务器 连接到 Internet 的计算机称为客户端和…

四、面向对象2(30小时精通C++和外挂实战)

四、面向对象2&#xff08;30小时精通C和外挂实战&#xff09; B-01-对象的内存B-02-构造函数B-04-成员变量的初始化B-05-析构函数B-06-内存管理B-07-类的声明和实现分离B-08-命名空间B-09-继承B-10-成员访问权限 B-01-对象的内存 在C中对象可以自由的放在3中地方&#xff0c;而…

Oracle 19c 修改db_name

将db_namedcpfarei 修改成 db_namedcpfardb&#xff0c;使用oracle自带的nid工具修改 修改前&#xff1a; SQL> show parameter nameNAME TYPE VALUE ------------------------------------ ----------- ------------------------…

【算法】插入排序 与 希尔排序 概念+图解+代码【Python C C++】

1.插入排序 1.1概念 插入排序(InsertionSort)&#xff0c;一般也被称为直接插入排序。 对于少量元素的排序&#xff0c;它是一个有效的算法。插入排序是一种最简单的排序方法&#xff0c;它的基本思想是将一个元素插入到已经排好序的有序表中&#xff0c;从而构造出一个新的…

mathtype7.4永久激活码(mathtype7永久注册码网盘下载)

大家好&#xff0c;我是你们的数学小能手&#xff01;今天我要安利一款超实用的工具——MathType&#xff0c;让你在数学的世界里游刃有余&#xff0c;轻松搞定各种公式和计算。准备好被种草了吗&#xff1f;跟我一起来瞧瞧吧&#xff01; MathType是理科生专用的必备工具&…

鸿蒙9+在TV端焦点封装控制

鸿蒙9 目前不支持鸿蒙系统电视&#xff0c;但是往后肯定是必须会支持的&#xff0c;所以直接学arkts就完事了&#xff0c;目前的api9对焦点控制还是不够直接简洁&#xff0c;估计还在完善中&#xff0c;但是可以通过自定义component来实现一下 首先踩坑&#xff1a; Row官方说…

EXCEL 排名(RANK,COUNTIFS)

1.单列排序 需求描述&#xff1a;如有下面表格&#xff0c;需要按笔试成绩整体排名。 解决步骤&#xff1a; 我们使用RANK函数即可实现单列整体排名。 Number 选择第一列。 Ref 选择这一整列&#xff08;CtrlShift向下箭头、再按F4&#xff09;。 "确定"即可计算…

一键解锁百变发型!上交联合Tiamat震撼发布Stable-Hair发型移植黑科技!

Stable-Hair 是一种基于扩散的新型发型转移方法&#xff0c;可以稳健地转移各种现实世界的发型。在各种具有挑战性的发型上实现了高度详细和高保真度的转移&#xff0c;效果令人印象深刻&#xff0c;同时保留了原始身份内容和结构。 相关链接 论文链接: https://arxiv.org/pdf…

【SpringBoot】URL映射之consumes和produces匹配、params和header匹配

4.2.3 consumes和produces匹配 //处理request Content-Type为"application/json"类型的请求 RequestMapping(value"/Content",methodRequestMethod.POST,consumes"application/json") public String Consumes(RequestBody Map param){ return…

windows远程免密码登陆

1、按下WindowsR,打开运行窗口&#xff0c;输入gpedit.msc 2、依次选择计算机设置-- Windows 设置--安全设置--本地策略--安全选项 3、双击进入--帐户&#xff1a;使用空白密码的本地帐户只允许进行控制台登录 双击打开 参考 百度安全验证 Win11提示凭证不足无法访问这台打…