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对象是用户在一个元素上选择文件返回的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
 



// 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)

参考文章：https://www.cnblogs.com/hhhyaaon/p/5929492.html