HTML5中的FileReader对象

news2024/11/17 5:51:40

FileReader

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

方法

readAsArrayBuffer(file):void : 异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void : 异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file):void : 异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void : 异步按字符读取文件内容，结果用字符串形式表示

读取方式

文件：在这里插入图片描述
使用FileReader读取：

const reader = new FileReader();
// 通过四种方式读取文件
//reader.readAsXXX(file);   
reader.onload = function(){
    //查看文件输出内容
    console.log(this.result);
    //查看文件内容字节大小
    console.log(new Blob([this.result]))
}

readAsDataURL
查看图片输出结果：
查看txt输出结果：

（都转换成了base64）
readAsText
此方法可以通过不同的编码方式读取字符，我们使用utf-8读取:
查看图片输出结果：

查看txt输出结果：

readAsText读取文件的单位是字符，故对于文本文件，只要按规定的编码方式读取即可正常展示；而对于图片就会乱码
readAsBinaryString
查看图片输出结果：

查看txt输出结果：

readAsBinaryString函数会按字节读取文件内容，读取二进制内容后会编码成字符，所以内容大小会变大
readAsArrayBuffer
查看图片输出结果：

查看txt输出结果：

readAsArrayBuffer方法会按字节读取文件内容，并转换为ArrayBuffer对象，结果与原文件大小一致。readAsArrayBuffer读取文件后，会在内存中创建一个ArrayBuffer对象（二进制缓冲区），将二进制数据存放在其中。通过此方式，我们可以直接在网络中传输二进制内容。而本身ArrayBuffer中的内容对外是不可见的，若要查看其中的内容，就要引入另一个概念：类型化数组。

readAsArrayBuffer与类型化数组

类型化数组（或称视图view）是读写ArrayBuffer中数据的接口,JS可以通过8种不同的接口创建类型化数组，分别为：Int8Array，Uint8Array，Int16Array，Uint16Array，Int32Array，Uint32Array，Float32Array，Float64Array

// 创建一段12字节的ArrayBuffer
var b = new ArrayBuffer(12);
// 在b上创建一个视图v1，视图中每个元素类型为Uint8（占1字节），开始于字节索引0，结束于ArrayBuffer结尾
var v1 = new Uint8Array(b);
// 在b上创建一个视图v2，视图中每个元素类型为Uint32（占4字节），开始于字节索引4，结束于ArrayBuffer结尾
var v2 = new Uint32Array(b,4);
// 在b上创建一个视图v3，视图中每个元素类型为Uint16（占2字节），开始于字节索引2，视图长度为2，结束于字节索引5
var v3 = new Uint16Array(b,2,2);

如图：
在这里插入图片描述
一段ArrayBuffer上重叠了三个视图，可以通过三种方式访问ArrayBuffer中的数据
此时做如下测试：
1、通过v1向b中写入数据
2、通过v1、v2、v3从b中读取数据

首先通过v1为每个元素赋值为十进制1，则ArrayBuffer中每个元素存储的二进制为00000001
通过v2读取，v2[0]和v2[1]中读取出的二进制均为00000001000000010000000100000001，转换为十进制即为16843009
通过v3读取，v3[0]和v3[1]中读取出的二进制均为0000000100000001，转换为十进制即为257
由此我们可以归纳出ArrayBuffer与类型化数组间的关系：