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 對象（掘金網）