轻松搞定 JS 中的 Blob、ArrayBuffer、FileReader 等文件处理操作

2023-10-16 15:10:54

在前端应用中，处理二进制数据或文本文件是常见需求。JavaScript 提供了几种方式来实现这一目标，包括 Blob 对象、ArrayBuffer 对象和 FileReader 接口。这些工具共同作用于文件的读取、上传以及转换等操作。本文将详细介绍如何使用这些技术。

Blob：封装二进制数据

Blob 是一种用于表示不可改变、原始数据的对象。通常用于处理视频、音频或图片等大容量的数据。当需要上传或下载这样的文件时，可以将其视为一个整体进行处理。

创建 Blob 对象

// 创建一个包含文本的Blob对象
const text = 'Hello, world!';
const blob = new Blob([text], {type: 'text/plain'});

ArrayBuffer：存储二进制数据

ArrayBuffer 提供了一种用于表示通用固定长度原始二进制数据缓冲区的方法，可以用来保存文件内容。

转换 Blob 为 ArrayBuffer

// 使用FileReader读取Blob并返回一个Promise，解析后可获得ArrayBuffer对象。
function blobToArrayBuffer(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsArrayBuffer(blob);
    });
}

// 使用示例
blobToArrayBuffer(blob).then(arrayBuffer => console.log(arrayBuffer));

FileReader：读取文件内容

FileReader 提供了一个用于异步或同步读取存储在用户计算机上的文件的方法。它支持多种读取模式，如文本、二进制数据和数据URL。

使用 FileReader 读取 Blob

const reader = new FileReader();
reader.onloadend = function(event) {
    console.log('Successfully loaded', event.target.result);
};
reader.readAsText(blob); // 支持readAsDataURL, readAsArrayBuffer等方法。

文件上传至服务器

处理完文件内容后，下一步通常就是将其上传到服务器。可以使用 Fetch API 来发送请求。

示例：将 Blob 上传到服务器

function uploadBlob(blob) {
    const formData = new FormData();
    formData.append('file', blob, 'filename.txt');

    fetch('/upload-endpoint', { method: 'POST', body: formData })
        .then(response => response.text())
        .then(data => console.log(data));
}

// 使用示例
uploadBlob(blob);