浏览器展示Blob/File文件

1. 浏览器展示Blob/File文件

I.Blob格式转Base64格式

当我们接收到后端传输过来的文件时,很多时候我们需要将传过来的文件转为Base64格式。如后端传来验证码图片时等

下面将提供函数:

// Blob转Base64
export const blobToBase64 = (blob: Blob) =>new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = () => resolve(reader.result);reader.onerror = (error) => {reject(error);};reader.readAsDataURL(blob);});

注意:请求时可以设置responseType:‘blob’,以获得Blob格式文件

II. URL.createObjectURL(file:File|Blob)方法

createObjectURL是JavaScript中一个非常有用的函数,它可以将Blob、File等二进制文件转换为浏览器可以直接显示的URL地址,从而方便进行展示、下载等操作。

URL.createObjectURL(file:File|Blob)方法将其转换为URL地址,这样可以是对应标签展示文件,比如img展示图片。使用完URL后,需要手动释放URL.revokeObjectURL(url)。否则可能会导致内存泄漏和性能问题。

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

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

相关文章

ChatGPT论文指南|ChatGPT如何助力论文中的数据分析!【建议收藏】

点击下方▼▼▼▼链接直达AIPaperPass ! AIPaperPass - AI论文写作指导平台 公众号原文▼▼▼▼: ChatGPT论文指南|ChatGPT如何助力论文中的数据分析!【建议收藏】 小编在之前的论文写作流程中,介绍了大量论文文字工作&#xff…

Effective objective-c-- 内存管理

Effective objective-c-- 内存管理 前言理解引用计数引用计数工作原理属性存取方法中的内存管理自动释放池保留环要点 以ARC简化引用计数使用ARC时必须遵循的方法和命名规则变量的内存管理语义ARC如何清理实例变量覆写内存管理方法要点 在dealloc方法中只释放引用并解除监听要点…

Mybatis-Plus 5分钟快速上手,10分钟熟练使用

小伙伴们好,欢迎关注,一起学习,无限进步 以下为学习 mybatis-plus 过程中的笔记 mybatis-plus 官网地址:https://mp.baomidou.com/ 文章目录 特性快速开始mybatis-plus 配置插入测试及雪花算法主键生成策略查询更新删除查询指定字…

Text2SQL 和 智能问答 的提示词写法

Text2SQL 生成 Query SQL System Message You are a {dialect} expert. Given an input question, creat a syntactically correct {dialect} query to run. Unless the user specifies in the question a specific number of examples to obtain, query for at most {top_k} r…

Linux 创建.NET 服务

文章目录 创建服务启用服务启动 & 重启服务查看服务状态问题排查 创建服务 将服务文件上传到 /home/mes/api-mes-dev, 其他服务修改对应的目录在 /usr/lib/systemd/system/ 创建 mesapi-dev.service, 其他服务修改对应文件名 [Unit] Descriptionmesapi-dev service[Servi…

探索Linux世界:初次接触和基本指令(文件操作)

文章目录 1.基本介绍和准备2.基本指令和Linux的基本操作3.几个重要基本指令3.1 ls - 列出文件和目录3.1.1文件的知识3.1.2 .和..文件 3.2pwd - 显示当前工作目录3.2.1路径知识 3.3 cd - 切换目录3.4 touch - 创建文件或更新时间戳3.5mkdir - 创建新目录3.6rm - 删除文件或目录3…

leetcode热题100学习计划-链表-反转链表

思路 使用头插法逆转链表 注:链表一般为操作方便,头结点不存值,是一个虚拟节点 代码 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val)…

深入了解 Android 中的 FrameLayout 布局

FrameLayout 是 Android 中常用的布局之一&#xff0c;它允许子视图堆叠在一起&#xff0c;可以在不同位置放置子视图。在这篇博客中&#xff0c;我们将详细介绍 FrameLayout 的属性及其作用。 <FrameLayout xmlns:android"http://schemas.android.com/apk/res/androi…

【数据结构和算法初阶(C语言)】带环链表问题详解(快慢指针的烧脑应用)

目录 1.铺垫-----带环链表基本了解 2. 题目&#xff1a;环形链表 3.环形链表|| ​编辑 3.1题解1 3.2 题解2 4.总结 1.铺垫-----带环链表基本了解 环形链表题目启迪&#xff1a; 环形链表特点&#xff1a;遍历链表会出现一模一样的地址 2. 题目&#xff1a;环形链表 给…

数字化转型导师鹏:政府数字化转型政务服务类案例研究

政府数字化转型政务服务类案例研究 课程背景&#xff1a; 很多地方政府存在以下问题&#xff1a; 不清楚标杆省政府数字化转型的政务服务类成功案例 不清楚地级市政府数字化转型的政务服务类成功案例 不清楚县区级政府数字化转型的政务服务类成功案例 课程特色&#x…

基于C语言实现内存型数据库(kv存储)

基于C语言实现内存型数据库(kv存储) 文章目录 基于C语言实现内存型数据库(kv存储)1. 项目背景1.1 Redis介绍1.2 项目预期及基本架构 2. 服务端原理及代码框架2.1 网络数据回环的实现2.2 array的实现2.3 rbtree的实现2.4 btree的实现2.5 hash的实现2.6 dhash的实现2.7 skiplist的…

XV4001KC数字输出 车载用(piezoman)

EPSON的XV4001KC角速度传感器是为满足汽车行业对高精度和高可靠性需求而设计的。它不仅提供了高级的运动监测特性&#xff0c;高精度的角速度测量和温度监测功能&#xff0c;而且其紧凑的设计6.04.83.3mm尺寸对于空间受限的车载环境来说&#xff0c;是一大优势&#xff0c;使得…

二十篇esp345

from machine import I2C,Pin from ssd1306 import SSD1306_I2C i2c I2C(sdaPin(“Y8”), sclPin(“Y6”)) oled SSD1306_I2C(128, 64, i2c, addr0x3c) oled.text(“Hello World!”, 0, 0) oled.text(“MicroPython”, 0, 20) oled.text(“By 01Studio”, 0, 50) oled.show()…

vue 中在子页面中使用watch监听父页面数据而导致接口多次调用

vue 中在子页面中使用watch监听父页面数据而导致接口多次调用 解决方式 debounce function debounce(func, delay) {let timerId;return function(...args) {clearTimeout(timerId);timerId setTimeout(() > {func.apply(this, args);}, delay);}; }watch中 watch:{监听值…

AIGC 知识:机器学习中的“微调“和“迁移学习“有什么区别?

以下是关于**微调 (fine-tuning)和迁移学习 (Transfer learning)**的区别&#xff0c;涉及到机器学习和深度学习的上下文&#xff1a; 迁移学习&#xff1a; 概述&#xff1a;迁移学习涉及使用预训练模型作为新任务或领域的起点。目标&#xff1a;利用预训练模型在大型数据集上…

政务浏览器——打通信创闭环最后一公里

当前&#xff0c;信创建设工作主要集中在芯片、操作系统、数据库以及pc整机&#xff0c;这些领域基本可用&#xff0c;或者达到了市场主流水平。但是&#xff0c;政务办事场景下的信创落地仍然困难重重&#xff0c;很多地方不得不装双系统或买两台设备来来平衡日常业务和信创考…

Qt:基于QQuickFramebufferObject显示QImage到QML中

GItHub地址 简介 本仓库实现了一个在QML框架中&#xff0c;显示QImage数据的QML控件&#xff0c;取名为JQImageItem 本控件针对的场合是需要显示并且频繁修改QImage的场景&#xff0c;例如视频显示。 提供了2个实现版本&#xff0c;一个是基于QQuickFramebufferObject&…

STM32CubeIDE基础学习-软件安装,环境搭建

STM32CubeIDE基础学习-软件介绍及环境搭建步骤 文章目录 STM32CubeIDE基础学习-软件介绍及环境搭建步骤前言第1章 STM32CubeIDE 介绍1.1 软件描述1.2 软件支持的功能及特点 第2章 STM32CubeIDE 软件安装2.1 STM32CubeIDE 软件获取方法2.2 STM32CubeIDE 软件安装步骤2.2.1 错误安…

C++模板完整版

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int& left, int& right) {int temp left…

抖店入驻费用是多少?新手入驻都有哪些要求?2024费用明细!

我是电商珠珠 我做电商做了将近五年&#xff0c;做抖店做了三年多&#xff0c;期间还带着学员一起做店。 今天&#xff0c;就来给大家详细的讲一下在抖音开店&#xff0c;需要多少费用&#xff0c;最低需要投入多少。 1、营业执照200元左右 就拿个体店举例&#xff0c;在入…