背景

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

一、base64轉(zhuǎn)為file

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

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

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

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

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)代瀏覽器中都可用的。在舊瀏覽器中，需要使用其它庫來替代這兩個函數(shù)。

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

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

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

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

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)造出來的 Blob 對象就可以按照二進制文件的方式來使用，可以作為參數(shù)傳入 FileReader, 通過 FormData 對象上傳到服務器等。

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

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

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

還有一些第三方庫，比如 FileSaver.js, 可以使用它來將 Blob 對象保存在本地。

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

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

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

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

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

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

由于這個是新的 API, 可能在部分瀏覽器上不能使用, 也可以使用第三方庫來兼容在舊瀏覽器上使用。

二、File => base64

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

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

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

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

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

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

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

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

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

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

以下是一個將 Blob 對象轉(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ù)接收一個 Blob 對象作為參數(shù)，并返回一個 Promise 對象，該 Promise 對象最終返回一個 base64 字符串。在函數(shù)內(nèi)部，創(chuàng)建了一個 FileReader 對象，并調(diào)用其 readAsDataURL 方法將 Blob 對象讀取為 DataURL。在讀取完成后，我們使用 Promise 對象的 resolve 方法將 DataURL 中的 base64 字符串提取出來并返回。如果讀取過程中出現(xiàn)錯誤，則使用 reject 方法拒絕 Promise 對象。

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

最新評論