手把手教你：文件Url、base64、File、Blob、ArrayBuffer五大类型自由转换！

2024-01-11 18:27:04

在Web应用开发中，经常需要处理不同类型的文件数据。了解如何在URL、Base64编码、File对象、Blob对象以及ArrayBuffer之间进行相互转换是非常重要的技能。本文将详细介绍每种类型之间的转换方法，并提供实际操作示例。

URL到Base64的转换

方法概述

使用fetch API获取URL内容，然后通过读取响应数据来生成Base64编码字符串。

代码示例

async function urlToBase64(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob); // 读取并转换为Base64
    });
}

操作步骤

使用fetch获取URL内容。
将响应的blob对象转换成FileReader读取的数据。
使用readAsDataURL方法读取文件数据，并返回Base64编码。

Base64到Blob的转换

方法概述

将Base64字符串解析回原始二进制格式，再创建一个Blob对象。

代码示例

function base64ToBlob(base64) {
    const byteString = atob(base64.split(',')[1]);
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);

    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ab], { type: 'image/png' }); // 根据实际情况设置类型
}

操作步骤

使用atob()解码Base64字符串。
将解码后的二进制字符串转换为ArrayBuffer。
通过ArrayBuffer创建Blob对象。

Blob到File的转换

方法概述

利用Blob构造函数中的参数，将Blob实例直接包装成一个File对象。

代码示例

function blobToFile(blob, name) {
    return new File([blob], name);
}

操作步骤

使用new File()方法创建新的File对象。
将Blob作为参数传入，并指定文件名。

ArrayBuffer到Base64的转换

方法概述

ArrayBuffer通过读取其内容并转化为字符串，再将字符串编码为Base64形式。

代码示例

function arrayBufferToBase64(arrayBuffer) {
    const buffer = new Uint8Array(arrayBuffer);
    let binaryString = '';
    for (let i = 0; i < buffer.length; i++) {
        binaryString += String.fromCharCode(buffer[i]);
    }
    return btoa(binaryString);
}