将图像的base64编码转换为文件的JavaScript方法

有时候我们会将图像转化为base64编码，这可以方便图片的传输和处理。但是，在某些情况下，我们需要将图像的base64编码转换为实际的文件。本文将介绍如何使用JavaScript实现这一过程。

使用toBlob方法

toBlob方法是一个将图像转换为blob对象的浏览器API。blob对象表示二进制数据的不可变的原始数据。我们可以通过将blob对象转换为文件来实现将图像的base64编码转换为文件。

实现代码

function convertBase64ToFile(imageBase64, fileName) {
  // 将base64编码的图片转换为Blob对象
  let byteString = atob(imageBase64.split(',')[1]);
  let mimeString = imageBase64.split(',')[0].split(':')[1].split(';')[0];
  let ab = new ArrayBuffer(byteString.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  let blob = new Blob([ab], { type: mimeString });

  // 将Blob对象转换为文件
  let file = new File([blob], fileName, { type: mimeString });
  return file;
}

使用范例

// 将base64编码的图片转换为文件
let imageBase64 = "data:image/png;base64,iVBORw0KG...";
let fileName = "image.png";
let file = convertBase64ToFile(imageBase64, fileName);

// 处理上传图片的业务逻辑
// ...

使用dataURLtoFile函数

如果您不想使用浏览器API，还有一个非常有用的第三方库data-uri-to-buffer可以实现将图像的base64编码转换为文件。这里提供一个使用data-uri-to-buffer库实现的代码示例。

安装data-uri-to-buffer库

npm install data-uri-to-buffer

实现代码

import dataUriToBuffer from 'data-uri-to-buffer';

function dataURLtoFile(dataurl, filename) {
  // 将base64编码的图片转化为文件
  let buffer = dataUriToBuffer(dataurl);
  let file = new File([buffer], filename, { type: 'image/png' });
  return file;
}

使用范例

// 将base64编码的图片转化为文件
let imageBase64 = "data:image/png;base64,iVBORw0KG...";
let fileName = "image.png";
let file = dataURLtoFile(imageBase64, fileName);

// 处理上传图片的业务逻辑
// ...

以上两种方法都可以很方便地将图像的base64编码转换为文件。如有疑问，欢迎在评论区留言。