Html5 使用Blob对象处理二进制

Html5 使用Blob对象处理二进制

浏览器对二进制的处理的局限是一直存在的问题，当然，很多时候我们都迫切的需要一种处理二进制方法，在服务端的nodejs提供了buffer来处理二进制，而在客户端有blob。先来认识一下blob。

blob是浏览器提供用来处理二进制的一个对象，我们用form来上传文件的时候，所使用的input，将它的类型设置为file，用户选择文件之后，会返回一个FileList对象，File对象就在FileList对象当中，File对象继承自blob，这能让我们获取更多的文件信息。说了这么多来看一下如何创建一个blob对象。在blob还未被规范的时候，是使用blobBuilder来创建一个blob对象，而现在我们可以直接调用blob的构造函数来创建一个blob对象。

先来看一下blob的构造函数

Blob(array,options)

从这里可以看出blob构造函数接受两个参数，第一个参数为一个数组，为需要被处理的数据，第二个参数为配置参数，一般填上该数据的mime类型。

比如我现在创建一个blob实例，设置它的mime类型为text/html。把数据装载进blob对象有一个好处就是可以使用URL.createObjectURL来返回一个url来进行引用，比如我现在把这个blob对象转换为了url，把它交给iframe的src，现在来看一下效果

let blob = new Blob([`
  <h1>Hello, i'm a Blob</h1>
`],{type:"text/html"});

let iframe = document.createElement('iframe');
iframe.src = URL.createObjectURL(blob);
let body = document.querySelector('body');
body.appendChild(iframe);

可以看到这里已经被浏览器正确的现实出来了，但是浏览器怎么知道要以什么样的方式去显示呢，答案就是blob的配置参数，配置blob的mime类型

此外，blob的作用远远不止这些，blob还可以很容易的实现文件的分片上传，因为blob提供了一个slice方法，可以很容易的把blob分成很多片，轮流提交给后端。另外，blob还可以实现点击下载的功能，因为a标签有download属性，加上blob可以转换为url，所以点击链接下载也是很容易就能实现的。具体实现方法我们下一节再讨论。