javascript - JS中Base64转图片文件

Question

我正在处理一个项目，我必须将图像作为表单数据与其他文本字段一起上传。一开始我的文件是 Base64 字符串，然后在将它上传到服务器之前将它转换成一个文件。

const data = await fetch(base64String);
const blob = await data.blob();
const file = await new File([blob], 'avatar', { type: 'image/png' });

在将它上传到服务器之前，我在客户端记录了 base64String。然后我将 file 作为文件上传到服务器。在将它保存到 MongoDB 之前，当我在服务器端再次将其记录为 base64 字符串时，我发现我的字符串与以前不同。我觉得在客户端将 base64 转换为文件时我做错了什么。请帮帮我。

Answer 1

我已经解决了我的问题。当我从我的计算机输入图像文件时，我得到一个 base64 字符串，如下所示 -

dataimage/jpegbase64/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA...

但是，当我将它转换回文件时，它需要一个如下所示的字符串 -

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA....

所以，基本上，我不得不相应地 trim 字符串以匹配预期的格式，并在 this answer 之后编写了一个 base64 到文件的转换函数。 . 这是我将 base64 字符串转换为图像文件的函数

export function getFileFromBase64(string64:string, fileName:string) {
  const trimmedString = string64.replace('dataimage/jpegbase64', '');
  const imageContent = atob(trimmedString);
  const buffer = new ArrayBuffer(imageContent.length);
  const view = new Uint8Array(buffer);

  for (let n = 0; n < imageContent.length; n++) {
    view[n] = imageContent.charCodeAt(n);
  }
  const type = 'image/jpeg';
  const blob = new Blob([buffer], { type });
  return new File([blob], fileName, { lastModified: new Date().getTime(), type });
}