背景

最近項(xiàng)目中需要實(shí)現(xiàn)把圖片的 base64 編碼轉(zhuǎn)成 file 文件的功能，然后再上傳至服務(wù)器。起初是直接通過(guò)new File()的方式進(jìn)行轉(zhuǎn)換，在各個(gè)主流的瀏覽器基本上都支持，Android也沒(méi)問(wèn)題，但是在ios系統(tǒng)埋了個(gè)坑，ios11.4以下的系統(tǒng)上傳失敗。定位bug發(fā)現(xiàn)是new File()這個(gè)方法不兼容ios系統(tǒng)，只能另辟蹊徑，最后找到本篇文章的第二種方法

一、base64轉(zhuǎn)為file

在 js中，可以使用 Blob 對(duì)象將 base64 字符串轉(zhuǎn)換為 File 對(duì)象。

方法一、base64 直接轉(zhuǎn)換為 File 對(duì)象：

首先, 需要從 base64 字符串中獲取文件類型, 然后將文件類型和 base64 字符串轉(zhuǎn)換為 Blob 對(duì)象。最后, 使用 Blob 對(duì)象構(gòu)造函數(shù)創(chuàng)建一個(gè) File 對(duì)象。

下面是一個(gè)示例函數(shù)，它接收一個(gè) base64 字符串和文件名，并返回一個(gè) File 對(duì)象:

function base64ToFile(base64, fileName) {
  let arr = base64.split(",");
  let mime = arr[0].match(/:(.\*?);/)[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, { type: mime });
}

需要注意的是， atob 和 Uint8Array 是在所有現(xiàn)代瀏覽器中都可用的。在舊瀏覽器中，需要使用其它庫(kù)來(lái)替代這兩個(gè)函數(shù)。

如果需要在使用這個(gè)函數(shù)之前檢查文件類型是否支持，可以在函數(shù)中增加文件類型校驗(yàn)的代碼。

方法二、base64 先轉(zhuǎn)換為 Blob，再由 Blob 轉(zhuǎn)換為 File：

在 JavaScript 中，可以使用 Blob 對(duì)象將 base64 字符串轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)對(duì)象 Blob。

首先，使用 atob() 函數(shù)將 base64 字符串解碼為二進(jìn)制字符串。然后，使用 Uint8Array 構(gòu)造函數(shù)將二進(jìn)制字符串轉(zhuǎn)換為字節(jié)數(shù)組。最后，使用 Blob 構(gòu)造函數(shù)，將字節(jié)數(shù)組作為第一個(gè)參數(shù)，創(chuàng)建一個(gè)新的 Blob 對(duì)象。

1、先將 base64 轉(zhuǎn)換為 Blob：

// 將 base64 轉(zhuǎn)換為 Blob
function base64ToBlob(base64) {
  var arr = base64.split(","),
    mime = arr[0].match(/:(.\*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: mime,
  });
}

使用類似這樣的方式構(gòu)造出來(lái)的 Blob 對(duì)象就可以按照二進(jìn)制文件的方式來(lái)使用，可以作為參數(shù)傳入 FileReader, 通過(guò) FormData 對(duì)象上傳到服務(wù)器等。

需要注意的是, atob 和 Uint8Array 是在所有現(xiàn)代瀏覽器中都可用的。在舊瀏覽器中，需要使用其它庫(kù)來(lái)替代這兩個(gè)函數(shù)。

如果需要在使用這個(gè)函數(shù)之前檢查文件類型是否支持，可以在函數(shù)中增加文件類型校驗(yàn)的代碼。

另外，在 HTML5 中,可以使用 canvas 元素的 toBlob()方法 將圖片轉(zhuǎn)換為 Blob 對(duì)象，這個(gè)方法是基于 HTMLCanvasElement 元素的, 可以將一張圖片轉(zhuǎn)成 base64 后，再使用 canvas 的方法將圖片繪制在 canvas 元素上，然后使用 toBlob() 方法獲取到 Blob 對(duì)象。

還有一些第三方庫(kù)，比如 FileSaver.js, 可以使用它來(lái)將 Blob 對(duì)象保存在本地。

這些方法都能達(dá)到相同的目的，可以根據(jù)項(xiàng)目中使用的 JavaScript 環(huán)境和需要的復(fù)雜度來(lái)進(jìn)行選擇

在 JavaScript 中，可以使用 File 構(gòu)造函數(shù)將一個(gè) Blob 對(duì)象轉(zhuǎn)換為一個(gè) File 對(duì)象。

這個(gè)構(gòu)造函數(shù)接收兩個(gè)參數(shù): 第一個(gè)參數(shù)是一個(gè) Blob 或者 ArrayBuffer 對(duì)象，第二個(gè)參數(shù)是文件的名字。

2、再將 Blob 轉(zhuǎn)換為 File：

function blobToFile(blob, fileName) {
  return new File([blob], fileName);
}

由于 Blob 是 File 的超集， 所以可以直接將 Blob 對(duì)象轉(zhuǎn)換為 File 對(duì)象, 這樣就可以使用 File 對(duì)象的各種方法，例如獲取文件名、類型等。

由于這個(gè)是新的 API, 可能在部分瀏覽器上不能使用, 也可以使用第三方庫(kù)來(lái)兼容在舊瀏覽器上使用。

二、File => base64

方法一、File 直接轉(zhuǎn)換為 base64：

使用 FileReader 對(duì)象將 File 對(duì)象轉(zhuǎn)換為 base64 編碼的字符串。以下是一個(gè)簡(jiǎn)單的 JavaScript 代碼示例：

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    // 創(chuàng)建一個(gè)新的 FileReader 對(duì)象
    const reader = new FileReader();
    // 讀取 File 對(duì)象
    reader.readAsDataURL(file);
    // 加載完成后
    reader.onload = function () {
      // 將讀取的數(shù)據(jù)轉(zhuǎn)換為 base64 編碼的字符串
      const base64String = reader.result.split(",")[1];
      // 解析為 Promise 對(duì)象，并返回 base64 編碼的字符串
      resolve(base64String);
    };
    // 加載失敗時(shí)
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  });
}

方法二、File 先轉(zhuǎn)換為 Blob，再由 Blob 轉(zhuǎn)換為 base64：

1、先將 File 轉(zhuǎn)換為 Blob：

File 對(duì)象本身就是一種特殊類型的 Blob 對(duì)象，因此將 File 轉(zhuǎn)換為 Blob 可以直接使用 File 對(duì)象。

如果需要將 Blob 對(duì)象轉(zhuǎn)換為另一種 Blob 對(duì)象，可以使用 Blob 構(gòu)造函數(shù)，將原始 Blob 對(duì)象作為參數(shù)傳遞，然后使用新構(gòu)造出來(lái)的 Blob 對(duì)象進(jìn)行操作。以下是一個(gè)將 File 對(duì)象轉(zhuǎn)換為 Blob 對(duì)象的示例代碼：

function fileToBlob(file) {
  return new Blob([file], { type: file.type });
}

2、再將 Blob 轉(zhuǎn)換為 base64：

可以使用 FileReader 對(duì)象讀取 Blob 數(shù)據(jù)并轉(zhuǎn)換為 DataURL。Data URL 是一種基于 Base64 編碼的 URL 方案，可以用于在網(wǎng)頁(yè)中嵌入圖片或其他資源。

以下是一個(gè)將 Blob 對(duì)象轉(zhuǎn)換為 base64 字符串的示例代碼：

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => resolve(reader.result.split(",")[1]);
    reader.onerror = reject;
  });
}

上述代碼中的 blobToBase64 函數(shù)接收一個(gè) Blob 對(duì)象作為參數(shù)，并返回一個(gè) Promise 對(duì)象，該 Promise 對(duì)象最終返回一個(gè) base64 字符串。在函數(shù)內(nèi)部，創(chuàng)建了一個(gè) FileReader 對(duì)象，并調(diào)用其 readAsDataURL 方法將 Blob 對(duì)象讀取為 DataURL。在讀取完成后，我們使用 Promise 對(duì)象的 resolve 方法將 DataURL 中的 base64 字符串提取出來(lái)并返回。如果讀取過(guò)程中出現(xiàn)錯(cuò)誤，則使用 reject 方法拒絕 Promise 對(duì)象。

到此這篇關(guān)于淺析js中base64與file的轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)js base64與file轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論