探索js中base64与file之间的转换

背景

最近项目中需要实现把图片的 base64 编码转成 file 文件的功能，然后再上传至服务器。起初是直接通过new File()的方式进行转换，在各个主流的浏览器基本上都支持，Android也没问题，但是在ios系统埋了个坑，ios11.4以下的系统上传失败。定位bug发现是new File()这个方法不兼容ios系统，只能另辟蹊径，最后找到本篇文章的第二种方法

一、base64转为file

在 js中，可以使用 Blob 对象将 base64 字符串转换为 File 对象。

方法一、base64 直接转换为 File 对象：

首先, 需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64 字符串转换为 Blob 对象。最后, 使用 Blob 对象构造函数创建一个 File 对象。

下面是一个示例函数，它接收一个 base64 字符串和文件名，并返回一个 File 对象:

ini 复制代码

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 是在所有现代浏览器中都可用的。在旧浏览器中，需要使用其它库来替代这两个函数。

如果需要在使用这个函数之前检查文件类型是否支持，可以在函数中增加文件类型校验的代码。

方法二、base64 先转换为 Blob，再由 Blob 转换为 File：

在 JavaScript 中，可以使用 Blob 对象将 base64 字符串转换为二进制数据对象 Blob。

首先，使用 atob() 函数将 base64 字符串解码为二进制字符串。然后，使用 Uint8Array 构造函数将二进制字符串转换为字节数组。最后，使用 Blob 构造函数，将字节数组作为第一个参数，创建一个新的 Blob 对象。

1、先将 base64 转换为 Blob：

ini 复制代码

// 将 base64 转换为 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,
  });
}

使用类似这样的方式构造出来的 Blob 对象就可以按照二进制文件的方式来使用，可以作为参数传入 FileReader, 通过 FormData 对象上传到服务器等。

需要注意的是, atob 和 Uint8Array 是在所有现代浏览器中都可用的。在旧浏览器中，需要使用其它库来替代这两个函数。

如果需要在使用这个函数之前检查文件类型是否支持，可以在函数中增加文件类型校验的代码。

另外，在 HTML5 中,可以使用 canvas 元素的 toBlob()方法将图片转换为 Blob 对象，这个方法是基于 HTMLCanvasElement 元素的, 可以将一张图片转成 base64 后，再使用 canvas 的方法将图片绘制在 canvas 元素上，然后使用 toBlob() 方法获取到 Blob 对象。

还有一些第三方库，比如 FileSaver.js, 可以使用它来将 Blob 对象保存在本地。

这些方法都能达到相同的目的，可以根据项目中使用的 JavaScript 环境和需要的复杂度来进行选择

在 JavaScript 中，可以使用 File 构造函数将一个 Blob 对象转换为一个 File 对象。

这个构造函数接收两个参数: 第一个参数是一个 Blob 或者 ArrayBuffer 对象，第二个参数是文件的名字。

2、再将 Blob 转换为 File：

sql 复制代码

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

由于 Blob 是 File 的超集，所以可以直接将 Blob 对象转换为 File 对象, 这样就可以使用 File 对象的各种方法，例如获取文件名、类型等。

由于这个是新的 API, 可能在部分浏览器上不能使用, 也可以使用第三方库来兼容在旧浏览器上使用。

二、File => base64

方法一、File 直接转换为 base64：

使用 FileReader 对象将 File 对象转换为 base64 编码的字符串。以下是一个简单的 JavaScript 代码示例：

javascript 复制代码

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    // 创建一个新的 FileReader 对象
    const reader = new FileReader();
    // 读取 File 对象
    reader.readAsDataURL(file);
    // 加载完成后
    reader.onload = function () {
      // 将读取的数据转换为 base64 编码的字符串
      const base64String = reader.result.split(",")[1];
      // 解析为 Promise 对象，并返回 base64 编码的字符串
      resolve(base64String);
    };
 
    // 加载失败时
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  });
}

方法二、File 先转换为 Blob，再由 Blob 转换为 base64：

1、先将 File 转换为 Blob：

File 对象本身就是一种特殊类型的 Blob 对象，因此将 File 转换为 Blob 可以直接使用 File 对象。

如果需要将 Blob 对象转换为另一种 Blob 对象，可以使用 Blob 构造函数，将原始 Blob 对象作为参数传递，然后使用新构造出来的 Blob 对象进行操作。以下是一个将 File 对象转换为 Blob 对象的示例代码：

lua 复制代码

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

2、再将 Blob 转换为 base64：

可以使用 FileReader 对象读取 Blob 数据并转换为 DataURL。Data URL 是一种基于 Base64 编码的 URL 方案，可以用于在网页中嵌入图片或其他资源。

以下是一个将 Blob 对象转换为 base64 字符串的示例代码：

ini 复制代码

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 函数接收一个 Blob 对象作为参数，并返回一个 Promise 对象，该 Promise 对象最终返回一个 base64 字符串。在函数内部，创建了一个 FileReader 对象，并调用其 readAsDataURL 方法将 Blob 对象读取为 DataURL。在读取完成后，我们使用 Promise 对象的 resolve 方法将 DataURL 中的 base64 字符串提取出来并返回。如果读取过程中出现错误，则使用 reject 方法拒绝 Promise 对象。