前端 Blob 详解

前端 Blob 详解

1. 什么是 Blob？

Blob（Binary Large Object）表示二进制大对象，用于存储二进制数据。在前端开发中，Blob 常用于处理文件、图像、视频等二进制数据。

2. 创建 Blob

可以通过 Blob 构造函数创建 Blob 对象。

const blob = new Blob(array, options);

• array: 数组，包含要放入 Blob 的数据。可以是字符串、ArrayBuffer、ArrayBufferView、Blob 等。
• options: 可选参数，包含两个属性：
  • type: 指定 Blob 的 MIME 类型，如 'text/plain'、'image/png' 等。
  • endings: 指定行结束符的处理方式，默认为 'transparent'。

    示例：

    const text = ["Hello, world!"];
    const blob = new Blob(text, { type: "text/plain" });
    

    3. Blob 的属性和方法

    • 属性:
      • size: Blob 对象的大小（字节）。
      • type: Blob 对象的 MIME 类型。

        示例：

        console.log(blob.size); // 13
        console.log(blob.type); // 'text/plain'
        

        • 方法:
          • slice(start, end, contentType): 返回一个新的 Blob 对象，包含原 Blob 的指定字节范围。
            • start: 起始字节（包含）。
            • end: 结束字节（不包含）。
            • contentType: 新 Blob 的 MIME 类型。

              示例：

              const slicedBlob = blob.slice(0, 5, "text/plain");
              

              4. 使用 Blob

              • 下载文件:

                可以通过创建 Blob URL 实现文件下载。

                const link = document.createElement("a");
                link.href = URL.createObjectURL(blob);
                link.download = "hello.txt";
                link.click();
                URL.revokeObjectURL(link.href); // 释放内存
                

                • 读取 Blob 数据:

                  使用 FileReader 读取 Blob 数据。

                  const reader = new FileReader();
                  reader.onload = function (event) {
                    console.log(event.target.result); // 读取的数据
                  };
                  reader.readAsText(blob); // 以文本形式读取
                  

                  • 上传文件:

                    通过 FormData 上传 Blob 数据。

                    const formData = new FormData();
                    formData.append("file", blob, "hello.txt");
                    fetch("/upload", {
                      method: "POST",
                      body: formData,
                    });
                    

                    5. Blob 与 File

                    File 对象继承自 Blob，通常用于表示用户选择的文件。File 对象包含额外的属性如 name、lastModified 等。

                    示例：

                    const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
                    console.log(file.name); // 'hello.txt'
                    

                    6. 总结

                    Blob 是前端处理二进制数据的重要工具，广泛应用于文件操作、数据存储和网络传输等场景。通过 Blob 构造函数、FileReader 和 FormData 等 API，可以高效地操作和传输二进制数据。

                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）