浏览器展示Blob/File文件

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

I.Blob格式转Base64格式

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

下面将提供函数:

typescript 复制代码
// 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)。否则可能会导致内存泄漏和性能问题。

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny072 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
前端君3 小时前
实现最大异步并发执行队列
javascript
破无差3 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css