file

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

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

file文件

file文件一般有兩種來(lái)源

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

每個(gè) File 對(duì)象都包含以下屬性，這些屬性都繼承自 Blob 對(duì)象：

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

base64

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

Blob

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

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

blob的用法

new Blob(array, options);

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

options：可選的 BlobPropertyBag 字典，它可能會(huì)指定如下兩個(gè)屬性

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

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

ArrayBuffer

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

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

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

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

ArrayBuffer的使用

new ArrayBuffer(bytelength)

FileReader

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

FileReader的使用

創(chuàng)建

const reader = new FileReader();

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

二進(jìn)制類型數(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)于幾種二進(jìn)制的詳細(xì)用法可以去MDN查看。

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

最新評(píng)論