file

在js中有很多二進制數(shù)據(jù)，有file,base64,Blob,ArrayBuffer,FileReader。這些二進制數(shù)據(jù)在文件導(dǎo)出和下載的時候是經(jīng)常會用到的，我們這篇文章就是介紹這些二進制數(shù)據(jù)以及它們之間的轉(zhuǎn)化。

文件（File）接口提供有關(guān)文件的信息，并允許網(wǎng)頁中的 JavaScript 訪問其內(nèi)容。實際上，F(xiàn)ile 對象是特殊類型的 Blob，且可以用在任意的 Blob 類型的 context 中。Blob 的屬性和方法都可以用于 File 對象。

file文件

file文件一般有兩種來源

• <input> 元素上選擇文件后返回的 FileList 對象；
• 文件拖放操作生成的 DataTransfer 對象；

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

• lastModified：引用文件最后修改日期，為自1970年1月1日0:00以來的毫秒數(shù)；
• lastModifiedDate：引用文件的最后修改日期；
• name：引用文件的文件名；
• size：引用文件的文件大??；
• type：文件的媒體類型（MIME）；
• webkitRelativePath：文件的路徑或 URL。

base64

Base64 是一種基于64個可打印字符來表示二進制數(shù)據(jù)的表示方法。Base64 編碼普遍應(yīng)用于需要通過被設(shè)計為處理文本數(shù)據(jù)的媒介上儲存和傳輸二進制數(shù)據(jù)而需要編碼該二進制數(shù)據(jù)的場景。這樣是為了保證數(shù)據(jù)的完整并且不用在傳輸過程中修改這些數(shù)據(jù)。

Blob

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取，也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作。

也就是說blob對象是原始二進制數(shù)據(jù)對象，是不可修改的。

blob的用法

new Blob(array, options);

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等對象構(gòu)成的，將會被放進 Blob；

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

type：默認(rèn)值為 ""，表示將會被放入到 blob 中的數(shù)組內(nèi)容的 MIME 類型。

endings：默認(rèn)值為"transparent"，用于指定包含行結(jié)束符\n的字符串如何被寫入，不常用。

ArrayBuffer

ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數(shù)據(jù)緩沖區(qū)。ArrayBuffer 的內(nèi)容不能直接操作，只能通過 DataView 對象或 TypedArrray 對象來訪問。這些對象用于讀取和寫入緩沖區(qū)內(nèi)容。

TypedArray：用來生成內(nèi)存的視圖，通過9個構(gòu)造函數(shù)，可以生成9種數(shù)據(jù)格式的視圖。

• Int8Array
• Uint8Array
• Uint8ClampedArray
• Int16Array
• Unit16Array
• Int32Array
• Uint32Array
• Float32Array
• Float64Array

DataViews：用來生成內(nèi)存的視圖，可以自定義格式和字節(jié)序。

ArrayBuffer的使用

new ArrayBuffer(bytelength)

FileReader

FileReader用于讀取文件并提取其內(nèi)容, 可以將 Blob 讀取為不同的格式。

FileReader的使用

創(chuàng)建

const reader = new FileReader();

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

二進制類型數(shù)據(jù)的互相轉(zhuǎn)化

file轉(zhuǎn)base64

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

base64轉(zhuǎn)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轉(zhuǎn)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轉(zhuǎn)base64

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

ArrayBuffer轉(zhuǎn)blob

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

ArrayBuffer轉(zhuǎn)base64

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

base64轉(zhuǎn)file

const base64ConvertFile = function (urlData, filename) { // 64轉(zhuǎn)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
    });
}

溫馨提示：由于文章篇幅有限，關(guān)于幾種二進制的詳細用法可以去MDN查看。

以上就是js二進制數(shù)據(jù)及其互相轉(zhuǎn)化實現(xiàn)詳解的詳細內(nèi)容，更多關(guān)于js二進制數(shù)據(jù)互相轉(zhuǎn)化的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論