File FileReader Blob

File

File 对象通常从用户使用 <input /> 元素选择文件返回的 FileList 对象中检索，或者从拖放操作返回的 DataTransfer 对象中检索。

继承自 Blob 的属性

• size（只读）：文件的大小，以字节为单位。
• type（只读）：文件的 MIME 类型（如 "image/png" 、 "text/plain" ）。如果类型未知，则返回空字符串 "" 。

File 特有的属性

• name（只读）：文件的名称（包含扩展名，如 "example.txt" ）。
• lastModified（只读）：文件最后修改的时间戳（毫秒数，自 1970-01-01 起）。

FileReader

FileReader 类型表示一种异步文件读取机制。可以把 FileReader 想象成类似于 XMLHttpRequest，只不过是用于从文件系统读取文件，而不是从服务器读取数据。

FileReaderSync 类型就是 FileReader 类型的同步版本，只在工作线程中可用。

实例属性

• error ： DOMError / null ， 如果读取失败，返回错误对象（如文件不存在或无法读取）；否则为 null。

• result ： ArrayBuffer / string / null ， 读取的结果：

  • 调用 readAsArrayBuffer() 时返回 ArrayBuffer
  • 调用 readAsText() 或 readAsDataURL() 时返回字符串 string
  • 未完成或失败时为 null。

• readyState ： number ， 表示读取操作的当前状态：

  • 0 (EMPTY)：初始状态，尚未开始读取。
  • 1 (LOADING)：已调用读取方法，正在读取 File 或 Blob，尚未发生错误。
  • 2 (DONE)：读取操作完成（无论成功、失败或中止）

实例方法

• abort () ： 中止正在进行的读取操作，触发 onabort 事件。
• readAsArrayBuffer(blob) ： 将文件读取为 ArrayBuffer（二进制数据），适用于处理图片、音频等二进制文件。
• readAsText(blob [, encoding]) ： 将文件读取为文本字符串，可指定编码（如 "utf-8" ，默认 UTF-8）。
• readAsDataURL(blob) ： 将文件读取为 Data URL（Base64 编码的字符串），可直接用于 <img src> 或文件下载。

事件

• loadstart ： 读取操作开始时触发。
• progress ： 在读取过程中周期性触发（用于跟踪进度）。
• load ： 读取成功完成时触发，此时 result 包含数据。
• abort ： 调用 abort() 取消读取时触发。
• error ： 读取失败时触发，error 属性包含错误信息。
• loadend ： 读取结束时触发（无论成功、失败或取消）。

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

构造函数

new Blob(blobParts, options) 

返回一个新创建的 Blob 对象，其内容由参数中给定的数组拼接组成。

1. blobParts：数组，包含要放入 Blob 的数据，可以是：

   • 字符串
   • ArrayBuffer
   • ArrayBufferView
   • 其他 Blob 对象

2. options（可选）：对象，包含两个属性：

   • type：Blob 的 MIME 类型，如 "text/plain"、"image/png"
   • endings：指定包含行结束符的字符串如何写入（"transparent" 或 "native"）

实例属性

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

实例方法

1. arrayBuffer()

   • 返回 Promise，解析为包含 Blob 二进制数据的 ArrayBuffer

2. bytes()

   • 返回 Promise，解析为包含 Blob 内容的 Uint8Array

3. slice([start [, end [, contentType]]])

   • 返回一个新的 Blob 对象，包含原 Blob 指定范围内的数据

   • 参数：

     • start：起始字节位置
     • end：结束字节位置
     • contentType：新 Blob 的 MIME 类型

4. stream()

   • 返回一个 ReadableStream，可以用于读取 Blob 内容

5. text()

   • 返回 Promise，解析为 Blob 内容的 UTF-8 文本