- FileReader ---- 读取 file/blob 数据
FileReader.readAsArrayBuffer() 异步方法， 读取完成 result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
FileReader.readAsDataURL() ： 一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
FileReader.readAsText() 一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
// 具体用法
// arrayBuffer 转blob
const blob = new Blob([arrayBuffer]);
// blob/file 转arrayBuffer
FileReader.readAsArrayBuffer(blob)
2. fetch 或者ajax 返回值类型 ：blob / arraybuffer
在 ajax 中可以配置： responseType = 'blob' / 'arrayBuffer'
在fetch中，直接 fetch(url).then((data)=>data.toBlob()).then(item=>{ 返回的item就为blob数据了 })
几种类型
Blob：new Blob([arrayBuffer]) 、canvas.toBlob、 xhr - responseType='blob' 、 fetch 的 result.toBlob()
arrayBuffer: fileReader.readAsArrayBuffer(blob/file)
objectURL: URL.createObjectURL(blob/fileSourse) / URL.revokeObjectURL DOMString。 可以通过fetch方法重新转回blob。
DataURL：canvas.toDataURL / fileRender.readAsDataURL(blob/file) --- base64地址
imageBitmap： const data = createImageBitmap( blob, image) / 主动调用 data.close() 回收内存
imageData: canvas.getImageData(x,y,width,height); --- canvas.putImageData
几种类型介绍
- base64: 是一种任意二进制到文本字符串的编码方法，常用于在URL、Cookie、网页中传输少量二进制数据。
- blob： Binary Large Object （直译：二进制大对象）在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件
Blob 与 ArrayBuffer
- Blob和ArrayBuffer都能存储二进制数据。Blob相对而言储存的二进制数据大（如File文件对象）。
- ArrayBuffer对象表示原始的二进制数据缓冲区，即在内存中分配指定大小的二进制缓冲区（容器），用于存储各种类型化数组的数据，是最基础的原始数据容器，无法直接读取或写入， 需要通过具体视图来读取或写入，即TypedArray对象或DataView对象对内存大小进行读取或写入；Blob对象表示一个不可变、原始数据的类文件对象。
- ArrayBuffer 是存在内存中的，可以直接操作。而 Blob 可以位于磁盘、高速缓存内存和其他不可用的位置。
应用一. 下载配置数据 .json 文件 到本地。
function downloadOptions(options, name) {
const objString = JSON.stringify(options, null, 2);
const blob = new Blob([objString], { type: 'application/json' });
const url = URL.createObjectURL(blob);
console.log(blob);
const a = document.createElement('a');
a.href = url;
a.download = name ? (name.endsWith('.json') ? name : name + '.json') : 'option.json';
const clickEvent = new MouseEvent('click');
a.dispatchEvent(clickEvent);
}
downloadOptions({name:'zh',password:'XXX'},'用户基本信息')
应用二 分片上传
File 对象是特殊类型的 Blob，可以用在任意的 Blob 类型的上下文中。
针对大文件传输的场景，我们可以使用 slice 方法对大文件进行切割，然后分片进行上传。
应用三 复制图片到粘贴板进行复制粘贴功能