Blob

  • 表示一个不可变、原始数据的类文件对象
  • 它的数据可以按照文本或二进制格式读取

  • File接口基于Blob，继承了Blob的功能并将其扩展使其支持用户系统上的文件

    File

  • 提供有关文件的信息，并允许网页中的JavaScript访问其内容

  • File对象是特殊类型的Blob

    ArrayBuffer

  • 用来表示通用的、固定长度的原始二进制数据缓存区

  • 是一个字节数组，通常在其它语言中称为byte array
  • ArrayBuffer中的内容不能直接操作，需要通过类型数组对象或DataView对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容

  • 可以从Base64字符串或者本地文件中获取ArrayBuffer

    1. let buffer = new ArrayBuffer(8) // 指定一个字节长度为8的ArrayBuffer对象

    Typed Arrays 类型数组

  • 类似数组的对象，并提供了一种用于访问原始二进制数据的机制

  • 注意与正常数组对象区分

    • 在类型数组上调用Array.isArray()会返回false
    • 不支持push、pop方法

      组成架构

  • 缓冲

    • 描述的是一个数据块，由ArrayBuffer对象实现
    • 不具有格式，且不提供机制访问其内容

  • 视图

    • 用于访问缓冲对象中包含的内存
    • 提供数据类型、起始偏移量和元素数，将数据转换为实际有类型的数组
    • 类型
      • Int8Array
      • Uint8Array
      • …

        DataView 视图

  • 一个可以从二进制ArrayBuffer对象中读取多种数值类型的底层接口

  • 使用时不用考虑不同平台的字节序问题

    语法

    ```javascript /*
  • buffer 一个已经存在的ArrayBuffer对象，数据源
  • byteOffset 第一个字节在buffer中的字节偏移，默认从第一个字节开始
  • byteLength 字节长度，默认是buffer的长度 */ new DataView(buffer [, byteOffset [, byteLength]]) ```

    FileReader

  • 允许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓存区的内容）
  • 使用File或Blob对象指定要读取的文件或数据
    1. let reader = new FileReader(file)

    事件处理

    onload
    load事件，在读取操作完成时触发
    onloadstart
    loadstart事件，在读取操作开始时触发
    onloadend
    loadend事件，在读取操作结束时（成功/失败）触发
    onprogress
    progess事件，在读取Blob时触发
    onabort
    abort事件，在读取操作被中断时触发
    onerror
    error事件，在读取操作发生错误时触发

    方法

    在读取指定Blob中的内容完成后，读取的数据保存在result属性中

readAsArrayBuffer

文件的ArrayBuffer数据对象

readAsDataURL

一个表示文件内容的Base64字符串

readAsText

一个表示文件内容的字符串

abort

中止读取操作

参考链接