浅谈JS处理文件数据的API：Blob、FileReader、Base64、File？( 二 ) _JS

1.FileReader 常用属性：

error：表示在读取文件时发生的错误；
result：文件内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
readyState：表示 FileReader 状态的数字。取值包含0（EMPTY）、1（LOADING）、2（DONE）

2.FileReader 常用 API（传参是Blob或File）：

readAsArrayBuffer()：读取数据， result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；
readAsBinaryString()：读取数据， result 属性中将包含所读取文件的原始二进制数据；
readAsDataURL()：读取数据， result 属性中将包含一个dataURL 格式的 Base64 字符串以表示所读取文件的内容。
readAsText()：读取数据， result 属性中将包含一个字符串以表示所读取的文件内容。

3. FileReader 常用事件：

abort：该事件在读取操作被中断时触发；
error：该事件在读取操作发生错误时触发；
load：该事件在读取操作完成时触发；
progress：该事件在读取 Blob 时触发。

input上传事件，如下：

<input type="file" id="_input" />const reader = new FileReader();_input.onchange = (e) => {reader.readAsDataURL(e.target.files[0]);};reader.onload = (e) => {console.log(e.target.result);};

ArrayBufferArrayBuffer是 JavaScript 中用于表示一段二进制数据的对象。它是在 ECMAScript 6（ES2015）中引入的新类型，允许开发者以更直接的方式处理二进制数据，而无需依赖传统的字符串和数组。它可以存储各种数据类型的二进制数据，如整数、浮点数、字节等。ArrayBuffer 对象的大小在创建时确定，并且不能被改变，所以需要借助如下方式读写数据。

TypedArray：用来生成内存的视图，通过9个构造函数，可以生成10种数据格式的视图

Int8Array: 8 位有符号整数（-128 到 127）Uint8Array: 8 位无符号整数（0 到 255）Int16Array: 16 位有符号整数（-32,768 到 32,767）Uint16Array: 16 位无符号整数（0 到 65,535）Int32Array: 32 位有符号整数（-2^31 到 2^31-1）Uint32Array: 32 位无符号整数（0 到 2^32-1）Float32Array: 32 位浮点数（IEEE 754 标准的单精度浮点数）Float64Array: 64 位浮点数（IEEE 754 标准的双精度浮点数）BigInt64Array: 64 位带符号整数（-2^63 到 2^63-1）（在 ECMAScript 2020 中引入）BigUint64Array: 64 位无符号整数（0 到 2^64-1）（在 ECMAScript 2020 中引入）

DataViews：用来生成内存的视图，可以自定义格式和字节序。

包含三个参数：

buffer：一个已经存在的 ArrayBuffer 对象 ， DataView 对象的数据源 。byteOffset：可选 ， 此 DataView 对象的第一个字节在 buffer 中的字节偏移 。如果未指定 ， 则默认从第一个字节开始 。byteLength：可选 ， 此 DataView 对象的字节长度 。如果未指定 ， 这个视图的长度将匹配 buffer 的长度 。

对于ArrayBuffer的读写操作，具体如下：

const buffer = new ArrayBuffer(16); // 创建一个大小为 16 字节的 ArrayBuffer// 使用DataView 读写 ArrayBuffer 数据const buffer = new ArrayBuffer(8);const view = new DataView(buffer);view.setInt16(0, 42); // 在位置0写入16位整数值42view.setFloat32(2, 3.14); // 在位置2写入32位浮点数值3.14const value1 = view.getInt16(0); // 从位置0读取16位整数值42const value2 = view.getFloat32(2); // 从位置2读取32位浮点数值3.14// 使用 TypedArray 读写 ArrayBuffer 数据const buffer = new ArrayBuffer(8);const uint8Array = new Uint8Array(buffer);// 使用 Uint8Array 来设置和获取二进制数据uint8Array[0] = 10;uint8Array[1] = 20;uint8Array[2] = 30;console.log(uint8Array[0]); // 输出 10console.log(uint8Array[1]); // 输出 20console.log(uint8Array[2]); // 输出 30

Object URLObject URL（对象URL）是一个特殊的 URL 格式，用于临时标识 JavaScript 中的 Blob、File 和 MediaSource 等二进制数据对象。通过创建 Object URL ，您可以在浏览器中处理这些二进制数据，而无需直接暴露或嵌入这些数据。
Object URL 遵循以下格式：blob:<unique_id> ，其中 <unique_id> 是一个唯一标识符，用于表示一个特定的二进制数据对象。这个 URL 可以被用于在客户端（通常是在浏览器中）引用这些二进制数据，例如在 <img> 标签的 src 属性、<a> 标签的 href 属性、<video> 和 <audio> 标签的 src 属性等处。创建 Object URL 的常用方法是使用 URL.createObjectURL() 函数。该函数接受一个 Blob、File 或 MediaSource 对象作为参数，并返回一个 Object URL 字符串。这个 URL 字符串在 Blob 对象的生命周期内是有效的。