blob和file对象文件API

File API

File API 使 Web 应用程序能够访问文件及其内容。
当用户使文件可用时，Web 应用程序可以使用文件元素或通过拖放访问文件

Blob

Blob是二进制大对象，
Blob对象不可以修改

Blob中读取内容使用fileReader
Blob也可以转化为可读流
Blob一般用于处理数据。

new Blob(array, options)
例如Array，具有ArrayBuffer、 TypedArray、DataView、Blob


实例方法
Blob.prototype.slice()
Blob.prototype.arrayBuffer()
Blob.prototype.stream()
Blob.prototype.text()

具体含义，参数看下面链接

Blob_MDN

file

File对象通常从FileList作为用户使用
	元素选择文件的结果返回的对象中检索<input>
	或者从拖放操作的DataTransfer对象中检索


Fileimplements Blob，因此它还具有以下可用属性：

File.prototype.size 只读
返回文件的大小（以字节为单位）。

File.prototype.type 只读
返回文件的MIME类型。

FileReader对象

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

FileReader.readAsArrayBuffer()
开始读取指定 的内容Blob，完成后，该result属性包含ArrayBuffer表示文件数据的 。

FileReader.readAsBinaryString()
开始读取指定 的内容Blob，完成后，该result属性包含来自文件的原始二进制数据作为字符串。

FileReader.readAsDataURL()
base64的格式，文件数据

FileReader.readAsText()
开始读取指定的内容Blob，一旦完成，该result属性将包含文件内容作为文本字符串。可以指定一个可选的编码名称。


load
当读取成功完成时触发。

FileReader链接

ArrayBuffer

ArrayBuffer对象用于表示一个通用的、固定长度的原始二进制数据缓冲区。
不能直接操作，需要使用TypeArray或者DataView来读取和写入缓冲区的内容。

所以TypeArray或者DataView来处理ArrayBuffer

区别：
TypeArray存同一种数据类型
DataView可以存不同的数据类型

TypeArray

TypeArray只是一个概念，实际他就是
Int8Array 8位有符号整数
Uint8Array 8位无符号整数
之类的

案例

创建一个ArrayBuffer

用TypeArray操作buffer

用DataView操作buffer

const buffer = new ArrayBuffer(8);
const wrapBuffer = new Int8Array(buffer);
const dataView = new DataView(buffer);

URL

URL.createObjectURL(object)
用于为其创建对象 URL 的 、File或Blob对象。MediaSource
包含可用于引用指定源内容的对象 URL 的字符串object。
用对象URL来显示图片

base64

canvas.toDataURL()

总结

ArrayBuffer 与 Blob有啥区别？
Blob作为一个整体文件，适合用于文件传输，
当需要对二进制数据进行操作时(比如要修改一段数据时，)就可以使用ArrayBuffer。

通过ArrayBuffer创建Blob,让后FileReader读取里面的内容

1.先创建一个buffer
let buffer = new ArrayBuffer(8);
2.操作Buffer,必须用TypeArray和Dataview
// Int8Array就是TypeArray的一种
let wrapBuffer = new Int8Array(buffer);
// 操作改buffer的内容
wrapBuffer[0]=100;
3. 用buffer创建一个Blob对象
let blob = new Blob([buffer]);
4. 读取blob对象，用feilReader
let reader = new FileReader();
读blob,以ArrayBuffer的结构
reader.readAsArrayBuffer(blob);
console.log(reader.result);
5. 读取出来的Arraybuffer又看不见
所以用TypeArray的Int8Array包装一下
let wrapbuffer = new Int8Array(reader.result)
console.log(wrapbuffer);

如果还没看不懂，就看视频吧
B站视频教学