JS中ArrayBuffer、Uint8Array、Blob与文本字符之间的相互转换

前端File上传、下载，Canvas保存图片，Ajax和Fetch二进制流传输，PDF预览，浏览器上WebAssembly的应用等等都需要用到ArrayBuffer和Blob。文件就具体介绍一下这些对象的相互转换。

API介绍

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用File或Blob对象指定要读取的文件或数据。

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。Blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。

ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图(TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。

Uint8Array对象是ArrayBuffer的一个数据类型(8 位不带符号整数)。

TextEncoder接受代码点流作为输入，并提供UTF-8字节流作为输出。

TextDecoder接口表示一个文本解码器，一个解码器只支持一种特定文本编码，例如utf-8、iso-8859-2、koi8、cp1261，gbk等等。解码器将字节流作为输入，并提供代码点流作为输出。

注意：二进制数组并不是真正的数组，而是类似数组的对象。

字符与ArrayBuffer，Uint8Array相互转换

TextEncoder=>ArrayBuffer

let encoder = new TextEncoder();

// 字符 转 Uint8Array

let uint8Array = encoder.encode("你好啊");

// Uint8Array 转 ArrayBuffer

let arrayBuffer = uint8Array.buffer
 

Blob=>ArrayBuffer

let str = 'hello，你好吗?'

let blob = new Blob([str],{type:'text/plain;charset=utf-8'});

let utf8decoder = new TextDecoder()

blob.arrayBuffer().then(buffer=>{

// ArrayBuffer

console.log(buffer)

let text = utf8decoder.decode(buffer)

// String

console.log(text) }

)
 

FileReader=>ArrayBuffer

let str = 'hello，你好吗?'

let blob = new Blob([str],{type:'text/plain;charset=utf-8'});

let utf8decoder = new TextDecoder()

let fr = new FileReader()

fr.readAsArrayBuffer(blob)

fr.onload = function(res) {

// ArrayBuffer

let buffer = fr.result

console.log(buffer)

let text = utf8decoder.decode(buffer)

// String

console.log(text)

}