浏览器展示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)。否则可能会导致内存泄漏和性能问题。

相关推荐
拾光拾趣录2 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00003 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl3 分钟前
深度剖析Kafka读写机制
前端
FogLetter4 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan5 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan6 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan7 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录7 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee7 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我8 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html