javascript - Conversia Base64 în fișier imagine în JS

Lucrez la un proiect în care trebuie să încarc o imagine ca date de formular împreună cu alte câmpuri de text. Am fișierul meu inițial sub formă de șir Base64, apoi îl convertesc într-un fișier înainte de a-l încărca pe server.

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

Am înregistrat base64String pe partea de client înainte de a-l încărca pe server. Apoi încarc file pe server ca un fișier. Înainte de a-l salva în MongoDB, când îl înregistru din nou ca un șir base64 pe partea de server, văd că șirul meu nu este la fel ca înainte. Simt că în timp ce convertesc base64 în fișier pe partea de client fac ceva greșit. Ajută-mă, te rog.

Răspuns #1

Am rezolvat problema mea. Când preiau un fișier de imagine de pe calculatorul meu, primesc un șir base64 ca mai jos -

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

Dar, când îl convertesc înapoi într-un fișier, se așteaptă la un șir de caractere ca mai jos -

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

Deci, practic, a trebuit să ajustez șirul corespunzător pentru a corespunde formatului așteptat și am scris o funcție de conversie de la base64 la fișier urmând acest răspuns. Iată funcția mea pentru a converti un șir base64 într-un fișier imagine

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 });
}

Răspunsul #2

Conversia Base64 într-un obiect fișier Javascript.

const yourBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr.....';

const file = new File(
  [Uint8Array.from(btoa(yourBase64), (m) => m.codePointAt(0))],
  'filename.png',
  { type: 'image/png' }
);

console.log(file);
// Output
// File {
//   lastModified: 703536246950,
//   lastModifiedDate: Tue Dec 26 2023 03:30:46...,
//   name: "filename.png",
//   size: 7832,
//   type: "image/png",
//   webkitRelativePath: "",
// }