js二進制數據及其互相轉化如何實現

這篇文章主要介紹“js二進制數據及其互相轉化如何實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“js二進制數據及其互相轉化如何實現”文章能幫助大家解決問題。

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();

二進制類型數據的互相轉化

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
    });
}

關于“js二進制數據及其互相轉化如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。