hello world

"; const blob = new Blob([text], { type: "text/html" }); // Blob {size: 22, type: "text/html"} //以文本读取 const textReader = new FileReader(); textReader.readAsText(blob); textReader.onload = function() { console.log(textReader.result); //

hello world

}; //以ArrayBuffer形式读取 const bufReader = new FileReader(); bufReader.readAsArrayBuffer(blob); bufReader.onload = function() { console.log(new Uint8Array(bufReader.result)); // Uint8Array(22) [60, 100, 105, 118, 62, 104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 60, 47, 100, 105, 118, 62] }; ``` ### 创建一个相同数据的ArrayBuffer，并转换成Blob： ```js //我们直接创建一个Uint8Array并填入上面的数据 const u8Buf = new Uint8Array([60, 100, 105, 118, 62, 104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 60, 47, 100, 105, 118, 62]); const u8Blob = new Blob([u8Buf], { type: "text/html" }); // Blob {size: 22, type: "text/html"} const textReader = new FileReader(); textReader.readAsText(u8Blob); textReader.onload = function() { console.log(textReader.result); // 同样得到div>hello world }; ``` #### 更多Blob和ArrayBuffer的相关内容可以参看下面的资料： - MDN Blob - MDN ArrayBuffer #### 阮一峰js标准参考教程二进制数组 #### URL.createObjectURL > video标签，audio标签还是img标签的src属性，不管是相对路径，绝对路径，或者一个网络地址，归根结底都是指向一个文件资源的地址。既然我们知道了Blob其实是一个可以当作文件用的二进制数据，那么只要我们可以生成一个指向Blob的地址，是不是就可以用在这些标签的src属性上，答案肯定是可以的，这里我们要用到的就是URL.createObjectURL()。 ```js const objectURL = URL.createObjectURL(object); //blob:http://localhost:1234/abcedfgh-1234-1234-1234-abcdefghijkl ``` > 这里的object参数是用于创建URL的File对象、Blob 对象或者 MediaSource 对象，生成的链接就是以blob:开头的一段地址，表示指向的是一个二进制数据。 > 其中localhost:1234是当前网页的主机名称和端口号，也就是location.host，而且这个Blob URL是可以直接访问的。需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的Blob URL。这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个Blob URL就失效。 > 通过URL.revokeObjectURL(objectURL) 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了,允许平台在合适的时机进行垃圾收集。如果是以文件协议打开的html文件（即url为file://开头），则地址中http://localhost:1234会变成null，而且此时这个Blob URL是无法直接访问的。实战一：上传图片预览有时我们通过input上传图片文件之前，会希望可以预览一下图片，这个时候就可以通过前面所学到的东西实现，而且非常简单。 ```js