js文件处理—Blob 操作 及 File 说明

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

一、Blob对象的API：

• 属性：

1. size： 对象所包含数据的大小（字节）。
2. type：表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

• 方法

1. slice()：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
2. stream()：返回一个能读取blob内容的 ReadableStream。
3. text()：返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
4. arrayBuffer()：返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer 

二、Blob.text() 对象：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/text

　　返回值：返回一个 promise 对象，以 resolve 状态返回一个以文本形式包含 blob 中数据的 USVString。并且该数据总是被识别为 UTF-8 格式。

var textPromise = blob.text();

blob.text().then(text => /* 执行的操作…… */);

var text = await blob.text();

 

 

 

---

 

File对象   https://developer.mozilla.org/zh-CN/docs/Web/API/File

一、File 对象来源：

　　1、通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。

　　    【File 对象是特殊类型的 Blob，file对象的接口继承了blob对象的属性和方法】

　　2、File对象除了通过 <input>元素产生外，也可以直接通过 File 构造函数实现。https://developer.mozilla.org/zh-CN/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

　　　　File 构造函数 生成的 file对象和 blob对象，功能上都差不多。所以我们一般很少使用 File 构造函数去生成 file对象。

---

Blob 与 File 的关系

在 JavaScript 中，文件在内存中的存储形式 核心概念可以归纳为 Blob 是基础，File 是 Blob 的扩展。以下是详细解析：

一、核心概念：Blob 与 File 的关系

• Blob：

  • 表示不可变的原始数据（二进制或文本）
  • 核心属性：type（MIME 类型）、size（字节大小）
  • 示例：
    

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

• File：

  • 继承自 Blob，额外添加了文件相关属性（如文件名、最后修改时间等）
  • 核心扩展属性：name、lastModified
  • 示例：
    

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

     

 

 

 

 

二、内存中的实际存储形式

1. 用户主动选择的文件（如 <input type="file">）

• 通过 File API 获取的对象是 File 类型（继承自 Blob）
• dd
  

  <input type="file" id="fileInput">
  <script>
    document.getElementById("fileInput").addEventListener("change", (e) => {
      const file = e.target.files[0]; // 获取的是 File 对象
      console.log(file instanceof File); // true
      console.log(file instanceof Blob); // true
    });
  </script>

   

2. 通过代码动态创建的数据

• 使用 new Blob() 创建的是 纯 Blob 对象
• 使用 new File() 创建的是 File 对象
• 示例：
  

  // 创建 Blob
  const blob = new Blob(["JSON data"], { type: "application/json" });
  
  // 创建 File（需要文件名）
  const file = new File(["JSON data"], "data.json", { type: "application/json" });

   

3.浏览器内部处理（如 Fetch API、Canvas 导出）

• Fetch API：响应体（Response.body）是 ReadableStream，可通过 response.blob() 或 response.arrayBuffer() 转换为 Blob
• Canvas 导出：canvas.toBlob() 生成 Blob，canvas.toDataURL() 生成 Base64 字符串
• 示例：
  

  // Fetch 获取图片并转为 Blob
  fetch("image.png")
    .then(res => res.blob())
    .then(blob => {
      console.log(blob instanceof Blob); // true
    });
  
  // Canvas 导出为 Blob
  const canvas = document.createElement("canvas");
  canvas.toBlob((blob) => {
    console.log(blob instanceof Blob); // true
  }, "image/png");