【ECMAScript】File、Blob、URL、FileReader、Base64、ArrayBuffer、DataView、TypedArray的关系

最新推荐文章于 2024-06-12 14:06:07 发布

古狼_guwolf

最新推荐文章于 2024-06-12 14:06:07 发布

阅读量952

点赞数 24

分类专栏：前端开发文章标签： ecmascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45620943/article/details/136224736

版权

53 篇文章 2 订阅

订阅专栏

本文详细介绍了Blob对象的原型方法和属性，以及File和FileReader在处理文件和二进制数据中的作用。重点讲述了Blob如何转换为URL和使用FileReader进行不同格式的读取。同时提到了ArrayBuffer和其视图对象在处理二进制数据时的重要性。

摘要由CSDN通过智能技术生成

Blob（binary large object，二进制大对象）原型方法和属性如下表：

方法和属性	说明	示例
new Blob(array, options)	功能：实例化一个二进制大对象输入： array: Array<ArrayBuffer \| Blob \| ArrayBufferView \| DOMString> options: { type: '', endings? } 输出：Blob实例	<略>
Blob.prototype.slice(start, end, contentType)	功能：切分Blob数据	<略>
Blob.prototype.arrayBuffer()	<略>	<略>
Blob.prototype.stream()	<略>	<略>
Blob.prototype.text()	<略>	<略>
Blob.prototype.type	<略>	<略>
Blob.prototype.size	<略>	<略>

url1 = window.URL.createObjectURL(file);
url2 = window.URL.createObjectURL(blob);

// File继承于Blob
File.prototype.__proto__ === Blob.prototype

主要有两种方法来获取 File 对象

方法和属性	说明	示例
new FileReader()		<略>
FileReader.prototype.result		<略>
FileReader.prototype .readAsArrayBuffer()	功能：以ArrayBuffer格式读取Blob数据，完成后result属性中保存ArrayBuffer结果	<略>
FileReader.prototype .readAsBinaryString()	功能：以文件原始二进制数据读取Blob数据，完成后result属性中保存原始二进制数据结果	<略>
FileReader.prototype .readAsText()	功能：以文本格式读取Blob数据，完成后result属性中保存Text结果	<略>
FileReader.prototype .readAsDataURL()	功能：以dataURL格式Base64读取Blob数据，完成后result属性中保存dataURL格式Base64结果	<略>
FileReader.prototype .abort()	<略>	<略>
FileReader.prototype.onload	<略>	<略>
FileReader.prototype.onloadstart	<略>	<略>
FileReader.prototype.onloadend	<略>	<略>
FileReader.prototype.onprogress	<略>	<略>
FileReader.prototype.onabort	<略>	<略>
FileReader.prototype.onerror	<略>	<略>
FileReader.prototype.error	<略>	<略>
FileReader.prototype.EMPTY - 0 FileReader.prototype.LOADING - 1 FileReader.prototype.DONE - 2

ArrayBuffer不能直接操作，需要借助DataView和TypedArray视图对象来操作。后续补充ArrayBuffer、DataView、TypedArray知识点。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~

关注

专栏目录