Question

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

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

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

Answer 1

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

<块引用>

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

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

<块引用>

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

所以，基本上，我必须相应地修剪字符串以匹配预期的格式，并在 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 });
}

JS 中 Base64 到图像文件的转换

1 个答案: