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

相关推荐
局外人LZ8 分钟前
WXT+Vue3+sass+antd+vite搭建项目开发chrome插件
前端·chrome·vue·sass
excel13 分钟前
招幕技术人员
前端·javascript·后端
专注VB编程开发20年36 分钟前
jss html5-node.nodeType 属性用于表示节点的类型
前端·js
烛阴1 小时前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
GUIQU.1 小时前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
暮乘白帝过重山2 小时前
Ollama 在本地分析文件夹中的文件
前端·chrome·ollama
一只小风华~2 小时前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
前端张三2 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
moyu842 小时前
前端从后端获取数据的流程与指南
前端
爱的叹息2 小时前
解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案
javascript·rust·sass