ArrayBuffer、Blog、File的处理

时间：2025-03-28 10:02:52

在计算机中处理数据，最常用的数据类型就是字符串和二进制，字符串的处理是比较简单的，毕竟我们为类能看得懂，数据不对马上就能看出来，对 String 的处理方法也经常使用，不陌生。

但是二进制数据是我们人类看不懂的数据，数据是否正确，不能一下子就看出来，略显陌生。在 JavaScript 中的经常用到的二进制的格式有三种：ArrayBuffer、Blob、File。

在了解这三种二进制之前，先了解一个类 FileReader，这个类是用来读取计算上的文件的一个类，是用来读取二进制文件的类。

读取到的结果有四种类型：

  • ArrayBuffer
  • BinaryString：原始二进制数据，如果是流的话，就是一些乱码
  • DataUrl：base64 数据
  • Text：文本

用法：

let fr = new FileReader();
fr.readAsArrayBuffer(blob);
fr.addEventListener('loadend', (event) => { 
	var ab = event.target.result;
    //  中的保存的就是读取到的数据
});

ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

生成 ArrayBuffer 使用的也是它的构造函数

let buffer = new ArrayBuffer(8);

/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

File 和 Blob 数据要转换成 ArrayBuffer ，需要借助 FileReader 。

File 转成 ArrayBuffer
let fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.addEventListener('loadend', (event) => { 
	var ab = event.target.result;
    //  中的保存的就是读取到的数据
});
Blob 转成 ArrayBuffer
let fr = new FileReader();
fr.readAsArrayBuffer(blob);
fr.addEventListener('loadend', (event) => { 
	var ab = event.target.result;
    //  中的保存的就是读取到的数据
});

Blob

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

/zh-CN/docs/Web/API/Blob/Blob

生成 Blob 对象需要用到构造函数。

// data 数据必须是一个数组
var blob = new Blob([data]);
file 转成 blob

file 是一种特殊的 blob，一般情况下不需要转换，需要转换时先利用 FileReader 转成 ArrayBuffer，再转成 blob。

let fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.addEventListener('loadend', (event) => { 
	var ab = event.target.result;
    //  中的保存的就是读取到的数据
    var blob = new Blob([ab]);
});
arraybuffer 转成 blob
var blob = new Blob([arraybuffer]);

File

生成 File 用到的就是 File 的构造函数

let file = new File(data,name[,option])

第一个参数是 数组，如果不是数组会报错，无论哪种类型的数据，都要放到一个数组当中

/zh-CN/docs/Web/API/File/File

当 arraybuffer 、blob 要转化成 File 的时候，也要通过 File 的构造方法来转换。

ArrayBuffer 转成 File
new File([new ArrayBuffer(8)],'ab')
Blob 转成 File

file 是特殊类型的 Blob ，能处理 blob 的环境就能处理 File，两者之间一般来说无需互转，如果需要转的话，先把 blob 先借助 FileReader 转成 arraybuffer 再转成 File。

let fr = new FileReader();
fr.readAsArrayBuffer(blob);
fr.addEventListener('loadend', (event) => { 
	var ab = event.target.result;
    //  中的保存的就是读取到的数据
    var file = new File([ab],'ab');
});

相关文章