createObjectURL 函数的参数是 File 对象、Blob 对象或者 MediaSource 对象。因此就要将 ArrayBuffer 转成这三者中的其一类型。
ArrayBuffer、File 相互转换
ArrayBuffer 转成 File 直接调用 new File 构造函数即可:
function bufToFile(buf, filename){ return new File([buf], filename); }File 函数的第一个参数是一个包含ArrayBuffer,ArrayBufferView,Blob,或者 DOMString 对象的数组,第二个参数表示文件名称。
File 转成 ArrayBuffer 需要借助 FileReader 类。
function fileToBuf(file, cb){ var fr = new FileReader(); var filename = file.name; fr.readAsArrayBuffer(file); fr.addEventListener("loadend",(e) => { var buf = e.target.result; cb(buf, filename); },false); }上面函数中,fr 是 FileReader 的实例,readAsArrayBuffer 可以读取指定的 Blob 或 File 内容,当读取完成后会触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。我们的 fileToBuf 接受一个回调,它接受 ArrayBuffer 和 filename 两个参数。
ArrayBuffer 与 Blob 互转
首先说一下 ArrayBuffer 转成 Blob。跟 ArrayBuffer 转成 File 很像。也是调用 new Blob 构造函数:
function bufToBlob(buf, mimeType = ""){ return new Blob([buf], { type: mimeType }); }Blob 函数的第二个参数与 File 函数的第二个参数略有不同,Blob 是一个对象,对象中有一个 type 属性,默认值为 “”,它代表了将会被放入到blob中的数组内容的 MIME 类型。Blob 的第一个参数也是一个由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的数组。
DOMString 是 DOM 字符串,比如:<a id="a"><b id="b">hey!</b></a>。它的 type 则是:text/html。
然后是 Blob 转成 ArrayBuffer。Blob 转成 ArrayBuffer 也是通过 FileReader 类进行转换。上面的 File 转 ArrayBuffer 我们稍微更改一下即可:
function blobToBuf(blob, cb){ var fr = new FileReader(); var type = blob.type; fr.readAsArrayBuffer(blob); fr.addEventListener("loadend",(e) => { var buf = e.target.result; cb(buf, type); },false); }或者将两个函数写成一个,可以使用 Object.prototype.toString.call 作为判别依据。
Blob 与 File 互转
File 对象其实是特殊类型的 Blob,且可以用在任意的 Blob 类型的上下文中。比如说,FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。File 接口也继承了 Blob 接口的属性。这两个东西互转感觉没必要,如果要转的话,可以利用 FileReader 作为桥梁,先转成 ArrayBuffer,然后在转成相应的 Blob 或者 File。
通过设置一个XMLHttpRequest 对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), “arraybuffer”, “blob”, “document”,“json” 和 “text”。比如后端如果发送的是一个二进制图像文件,在前端可以指定接受类型是 blob,这样 response 数据将是 blob 类型的数据。
var xhr = new XMLHttpRequest(); xhr.open("GET", "/myfile.png", true); // 指定接受类型 xhr.responseType = "blob"; xhr.onload = function(oEvent) { var blob = xhr.response; // ... }; xhr.send();发送二进制文件到服务端的话,XMLHttpRequest 对象的send方法已被增强,可以通过简单的传入一个ArrayBuffer Blob, 或者 File对象来发送二进制数据。
有关 XMLHttpRequest 接受和发送二进制数据可以参考 MDN 上的文档:
发送和接收二进制数据