Blob、URL.createObjectURL、File、FormDate、fileReader

Blob

背景

后端返回的是JSON格式的数据，那么js能够直接处理，可是后端若是返回二进制文件流，那么js是不能够直接处理的，而Blob的存在，容许咱们经过js直接操做二进制数据。

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不必定是js中的原生形式。

Blob对象和File对象均可以看作是存放二进制数据的容器，此外还能够经过Blob设置二进制数据的MIME类型。 注意：第一个参数是数组。

let blob = new Blob([ data ], {  type: 'application/xlsx' })
复制代码

File

File接口基于Blob，继承了Blob的功能，而且扩展支持了用户计算机上的本地文件，所以咱们能够像使用Blob同样使用File对象。

总结：Blob对象是用来接收后端接口返回的二进制文件流，File对象是用户在一个input元素上选择文件返回的FileList对象，File对象是特殊类型的Blob，均可以被FileReader、URL.createObjectURL()、createImageBitmap()、XMLHttpRequest.send()处理。

URL.createObjectURL

URL.createObjectURL静态方法会建立一个DOMString，其中包含一个表示参数中给出的对象URL。这个新的URL指向File对象或Blob对象。每次调用URL.createObjectURL方法时都会建立一个新的URL对象，即便你已经用相同的对象做为参数建立过。当再也不须要这些URL对象时，每一个对象必须经过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们，可是为了得到最佳性能和内存使用情况，你应该在安全的时机主动释放掉它们。

FormData

背景

文件传输和普通数据传输的数据格式是不一样的，也就是content-type（文档属于什么MIME类型）是不一样的，普通的数据类型是application/json，告诉服务器消息主体是序列化的json字符串，直接传给后台就能够了。文件数据类型是multipart/form-data，不能直接传给服务器，须要用到FormData方法将Content-Type设置为multipart/form-data同时将File对象以健值对的方式传递给服务器，告诉服务器消息主体是表单形式的数据格式，这样子服务器就知道怎样分别解析它们。使用FormData的最大优势就是咱们能够**异步上传**一个二进制文件。文件、语音、视频等都是二进制文件。

FileReader

背景

当后端返回的是一个图片，我须要将图片展现在页面上，由于不是json格式因此没法直接读取，这时候就须要用到FileReader方法。

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

下面是一个读取图片的例子：

// html
 <input type="file" name="file" id="file"></br>
<input type="button" name="btn" value="读取图像" id="btn">
<div id="picBox"><img src="" width="300" height="530" id="img"/></div>
// js
 var flObj=document.getElementById("file")
var btn=document.getElementById("btn");
 btn.οnclick=function()
 {
var file=flObj.files[0]; 
flObj.files[0];    
var fReader=new FileReader();
fReader.readAsDataURL(file)
fReader.οnlοad=function(e)
 {
document.getElementById("img").src= this.result
}
}
复制代码

用法

• FileReader.readAsArrayBuffer()：开始读取指定的Blob中的内容，一旦完成，result属性中保存的将是被读取文件的ArrayBuffer数据对象。

ArrayBuffer是二进制数组，这个接口的原始设计目的与WebGL有关，所谓WebGL是指浏览器与显卡之间的通讯接口，为了知足js与显卡之间大量的、实时的数据交换，传统的数据格式，须要格式转化，很是耗时，这时若是数据是二进制这样子就能够原封不动地传入显卡，脚本的性能就会大幅提高，二进制数组就是在这样背景下诞生的。

• FileReader.readAsBinaryString() ：开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
• FileReader.readAsDataURL()：开始读取指定Blob中的内容。一旦完成，rusult属性中将包含一个data:URL格式的字符串以表示所读文件的内容。通常用于读取本地图片实现预览功能，这样子就能够减小浏览器与服务器的交互。
• FileReader.readAsText()：开始读取指定的Blob中的内容。一旦完成，reuslt属性中将包含一个字符串以表示所读取的文件内容。通常用于读取类型为application/json二进制数据。

注意：图片预览功能能够经过FileReader.readAsDataURL()或window.URL.createObjectURL()来实现，若是要读取后端返回的图片、音频、视频统一用Blob()来处理，而后用window.URL.createObjectURL()这个方法生成一个url，放在src上就能够实现。

涉及知识点：下载文件(Blob)、异步上传文件(FormData)、异步读取文件(FileReader)、生成Blob对象和File对象的url(URL.createObjectURL)

参考文章：www.cnblogs.com/hhhyaaon/p/…