一、File
通过File接口可获取到文件的相关信息,让网页的JS可读取到。File是继承Blob,Blob是它的原型对象。是前端JS特有的对象。
构造函数:定义
属性:name、size、type(MIME类型)、lastModified、lastModifiedDate等等
二、Blob
Binary large Object 二进制大对象,不是前端特有的对象,是计算机通用术语
不可变、原始数据的类文件。一个只读的二进制文件,不可进行操作的
构造函数 :定义
属性: name、type
方法 :arrayBuffer()、slice()、stream()、text()
例子如下所示:
其中slice方法可实现分割文件,分片上传
三、ArrayBuffer
从XHR、文件API、Canvas读取了字节流,直接拿JS的Array去存,浪费又低效。
ArrayBuffer就是为了增强JS的二进制处理能力。
ArrayBuffer就是一片内存,表示原始数据二进制的缓存区。
是无法直接操作它,需要借助TypedArray(类数组)和DataView(数据视图)对象来读写它。它们会将缓冲区的内容表示为特定的格式,并通过这些格式来读取缓冲区的内容
四、区别和联系
1 、File和Blob
File是DOM接口和文件的一座桥梁,将其联系起来
File继承于Blob,是特殊的Blob,拥有Blob的属性和方法,又多了几个自己独有的属性。
File是前端JS特有的对象,Blob是计算机通用术语
2、Blob和ArrayBuffer
ArrayBuffer更底层,是一段纯粹内存上的二进制数据,可借助TypedArray(类数组)和DataView(数据视图)对象来读写它,对某段数据进行操作它
Blob就是对二进制数据做了一层封装,拿到的是一个整体,可以看到整体的属性大小、类型,可以进行分割,但却看不到其内部的细节
Blob更易于传输
五、FileReader
异步读取用户存储在计算机的文件(或原始数据缓存区)的内容
** 方法 **
六、文件下载
1、通过a标签
不足之处:只能做get请求,url长度有限制;跨域限制;无法在header中携带token做鉴权操作;无法判断是否获取成功
2、window.open下载
不足之处:pdf、png、jpg等文件会直接打开预览;url长度限制;url编码问题;无法在header中携带token做鉴权操作;无法判断是否获取成功
3、location.href下载(可下载大文件)
不足之处 :pdf、png、jpg等文件会直接打开预览;url长度限制;url编码问题;无法在header中携带token做鉴权操作;无法判断是否获取成功
4、文件流传blob对象下载
不足之处 :兼容问题(IE10);需等文件流全部获取才会开始下载