前端blob数据
Blob介绍
定义
Blob 对象表示一个
不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。 通常可以用于声音、视频等多媒体文件的存储；
构造
new Blob(blobParts, options);
blobParts：数组类型，可以存放任意个ArrayBuffer、ArrayBufferView、Blob或DOMString（会编码为utf-8）；
options：可选，可以设置blob的type和endings；
- type：blob中数组元素的MIME类型，默认为
''; - endings：包含行字符串
\n的字符串如何被写入。默认值_transparent_保留不变，_native_会改为对应宿主操作系统文件系统的换行符。
DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString直接映射到 一个String。
属性
type：返回blob的MIME类型
size：blob的数据大小（字节）
方法
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
Blob.slice([start[, end[, contentType]]])
// 返回一个能读取blob内容的 ReadableStream。
Blob.stream();
// 返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.text()
// 返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer
Blob.arrayBuffer()
从Blob总提取数据
可以使用FileReader对象
const reader = new FileReader();
reader.addEventListener('loaded', function() {
// reader.reasult 包含被转换为typedArray的Blob
});
reader.readAsArrayBuffer(blob);
可以使用Response对象
const text = await (new Response(blob)).text()
File对象
定义
通常情况下， File 对象是来自用户在一个
<input>元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API
属性
name：文件名
size：文件大小
lastModified：文件最后修改时间对应时间戳
type：MIME类型
webkitRelativePath：返回file相关的path和URL
方法
slice：继承了Blob的slice方法
demo
<input>元素
<input type="file" id="fileUploader" multiple accept="image">
<script>
const el = document.getElementById('fileUploader');
el.onchange = (e) => {
const files = e.target.files;
console.log({ files }, files[0])
}
</script>
<div id="fileUploader"
ondrop="drop(e)"
ondragover="allowDrop(e)"
></div>
<script>
function drop(e) {
e.preventDefault();
const files = e.dataTransfer.files;
console.log({ files });
console.log(files instanceof FileList);
}
function allowDrop(e) {
e.preventDefault();
}
</script>
数据缓冲区
定义
数据缓冲区指的是内存中操作二进制数据的一片连续的存储区，相对于数组可以有效提高数据读取效率；
Buffer
Buffer是Node提供的对象，可以通过Buffer创建存储二进制数据的缓冲区用于整合前端媒体文件数据 等；
一个Buffer类似于一个整数数组，但它对应于V8堆内存之外的一块原始内存；
ArrayBuffer
表示一段固定长度的连续的用于存储二进制数据的缓存区；对于高密度访问的数据（音视频数据等）读取效率更高，因为数据会提前写入到内存中；
属性——byteLength，表示ArrayBuffer的大小
方法——slice(start, end)，返回一个新的ArrayBuffer
ArrayBufferView
ArrayBuffer未提供任何直接读写内存的方法，而ArrayBufferView是建立在ArrayBuffer上的视图，提供了处理二进制数据的基本单元，可以读取ArrayBuffer的内容；
TypedArrays和DataView是ArrayBufferView的实例
参考文献
- Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
- 「多图预警」那些年，被blob虐过的程序猿觉醒了！