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