JS文件二进制上传/读取的机制

前言

最近写项目时遇到了向后台请求文件时，后台返回传输文件格式为二进制流的情况。正好借此机会了解文件二进制上传/读取的机制。

文件二进制传输之 Blob 对象

Blob对象表示一个不可变的, 原始数据的类似文件对象，可以作为二进制文件存放的容器

可以通过构造函数来构建 Blob 对象的。

    var blob = new Blob(array[optional], options[optional]);
    // 第一个参数：数据序列，可以是任意格式的值，
    // 例如，任意数量的字符串，Blob 以及 ArrayBuffers
    // 第二个参数：用于指定将要放入Blob中的数据的类型

Blob 对象的基本属性：

• size ：Blob 对象包含的字节数。(只读)
• type ：Blob 对象包含的数据类型，如果类型未知则返回空字符串。

文件二进制传输之上传

通过formData对象实现异步上传二进制文件

创建一个空 FormData 对象，向 FormData 对象中添加文件对应的键/值对

    var formData = new FormData();
    formdata.append('file', upload_file)

创建负载 formData 对象的请求发送至服务器，服务器收到 formData 对象后为其开辟空间。

文件二进制传输之下载

文件二进制流转文件下载的方法：

1. 通过fileReader对象实现异步读取二进制文件
2. 通过 Blob 对象和 msSaveBlob(blob, fileName) 以本地方式保存文件
3. 通过 createObjectURL 把 Blob 对象指向到一个 URL, 再赋予到a标签

通过fileReader对象实现异步读取二进制文件

---

向服务器发送返回类型 Blob 对象的请求，并获取到文件的二进制 Blob 对象。

    // headerconfig
    xhr.responsetype = blob;

创建 FileReader 对象读取 Blob 对象，并通过a标签下载。

    let reader = new FileReader();  
    reader.readAsDataURL(Blob); // 转换为base64，直接放入a标签href  
    reader.onload = function(e) {  
    // 转换完成，创建一个a标签用于下载  
    let a = document.createElement('a');  
    a.download = fileName;  
    a.href = e.target.result;  
    document.body.appendChild(a); // 修复firefox中无法触发click  
    a.click();  
    document.body.removeChild(a);

通过 Blob 对象和 msSaveBlob(blob, fileName) 以本地方式保存文件

---

向服务器发送返回类型 Blob 对象的请求，并获取到文件的二进制 Blob 对象。

    // headerconfig
    xhr.responsetype = blob;

通过 Blob 对象和 msSaveBlob(blob, fileName) 以本地方式保存文件

    if (window.navigator.msSaveOrOpenBlob) {  
        navigator.msSaveBlob(blob, fileName);  
    }

通过 createObjectURL 把 Blob 对象指向到一个 URL, 再赋予到a标签

---

向服务器发送返回类型 Blob 对象的请求，并获取到文件的二进制 Blob 对象。

    // headerconfig
    xhr.responsetype = blob;

    objectUrl = window.URL.createObjectURL(blob)创建新的URL表示指定Blob对象
    a = document.createElement('a')创建a标签
    a.href = objectUrl指定下载链接
    a.download = fileName指定下载文件名
    a.click()触发下载
    a.remove()除a标签
    window.URL.revokeObjectURL(objectUrl)释放

参考资料

JS : Blob() 转换二进制下载文件流实例（CSDN论坛）
JavaScript 中 Blob 对象（掘金网）