js二進位制資料及其互相轉化實現詳解

2023-02-28 18:01:48

file

在js中有很多二進位制資料，有file,base64,Blob,ArrayBuffer,FileReader。這些二進位制資料在檔案匯出和下載的時候是經常會用到的，我們這篇文章就是介紹這些二進位制資料以及它們之間的轉化。

檔案（File）介面提供有關檔案的資訊，並允許網頁中的 JavaScript 存取其內容。實際上，File 物件是特殊型別的 Blob，且可以用在任意的 Blob 型別的 context 中。Blob 的屬性和方法都可以用於 File 物件。

file檔案

file檔案一般有兩種來源

<input> 元素上選擇檔案後返回的 FileList 物件；
檔案拖放操作生成的 DataTransfer 物件；

每個 File 物件都包含以下屬性，這些屬性都繼承自 Blob 物件：

lastModified：參照檔案最後修改日期，為自1970年1月1日0:00以來的毫秒數；
lastModifiedDate：參照檔案的最後修改日期；
name：參照檔案的檔名；
size：參照檔案的檔案大小；
type：檔案的媒體型別（MIME）；
webkitRelativePath：檔案的路徑或 URL。

base64

Base64 是一種基於64個可列印字元來表示二進位制資料的表示方法。Base64 編碼普遍應用於需要通過被設計為處理文字資料的媒介上儲存和傳輸二進位制資料而需要編碼該二進位制資料的場景。這樣是為了保證資料的完整並且不用在傳輸過程中修改這些資料。

Blob

Blob 物件表示一個不可變、原始資料的類檔案物件。它的資料可以按文字或二進位制的格式進行讀取，也可以轉換成 ReadableStream 來用於資料操作。

也就是說blob物件是原始二進位制資料物件，是不可修改的。

blob的用法

new Blob(array, options);

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等物件構成的，將會被放進 Blob；

options：可選的 BlobPropertyBag 字典，它可能會指定如下兩個屬性

type：預設值為 ""，表示將會被放入到 blob 中的陣列內容的 MIME 型別。

endings：預設值為"transparent"，用於指定包含行結束符n的字串如何被寫入，不常用。

ArrayBuffer

ArrayBuffer 物件用來表示通用的、固定長度的原始二進位制資料緩衝區。ArrayBuffer 的內容不能直接操作，只能通過 DataView 物件或 TypedArrray 物件來存取。這些物件用於讀取和寫入緩衝區內容。

TypedArray：用來生成記憶體的檢視，通過9個建構函式，可以生成9種資料格式的檢視。

Int8Array
Uint8Array
Uint8ClampedArray
Int16Array
Unit16Array
Int32Array
Uint32Array
Float32Array
Float64Array

DataViews：用來生成記憶體的檢視，可以自定義格式和位元組序。

ArrayBuffer的使用

new ArrayBuffer(bytelength)

FileReader

FileReader用於讀取檔案並提取其內容, 可以將 Blob 讀取為不同的格式。

FileReader的使用

建立

const reader = new FileReader();

FileReader還有很多方法和事件，感興趣的可以去MDN上檢視。

二進位制型別資料的互相轉化

file轉base64

let reader = new FileReader();
reader.readAsDataURL(file[0])

base64轉blob

const base64toBlob = (base64Data, contentType, sliceSize) => {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

blob轉ArrayBuffer

function blobToArrayBuffer(blob) { 
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = () => reject;
      reader.readAsArrayBuffer(blob);
  });
}

blob轉base64

function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

ArrayBuffer轉blob

const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);

ArrayBuffer轉base64

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

base64轉file

const base64ConvertFile = function (urlData, filename) { // 64轉file
    if (typeof urlData != 'string') {
        return;
    }
    let arr = urlData.split(',')
    let type = arr[0].match(/:(.*?);/)[1]
    let fileExt = type.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], 'filename.' + fileExt, {
        type: type
    });
}

溫馨提示：由於文章篇幅有限，關於幾種二進位制的詳細用法可以去MDN檢視。

以上就是js二進位制資料及其互相轉化實現詳解的詳細內容，更多關於js二進位制資料互相轉化的資料請關注it145.com其它相關文章！