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,所以点击链接下载也是很容易就能实现的。具体实现方法我们下一节再讨论。