javascript - Base64 to Image File Convertion in JS - Stack Overflow

admin管理员组

文章数量:1340761

I am working on a project where I have to upload an image as form data along with other text fields. I have my file in Base64 string at first, then I convert it into a file before uploading it to the server.

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

I logged the base64String in the client side before uploading it to the server. Then I upload file to the server as a File. Before saving it to MongoDB when I log it as a base64 string again in the server side, I see my string is not the same as before. I feel like while converting the base64 to file in the client side I am doing something wrong. Help me out please.

I am working on a project where I have to upload an image as form data along with other text fields. I have my file in Base64 string at first, then I convert it into a file before uploading it to the server.

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

I logged the base64String in the client side before uploading it to the server. Then I upload file to the server as a File. Before saving it to MongoDB when I log it as a base64 string again in the server side, I see my string is not the same as before. I feel like while converting the base64 to file in the client side I am doing something wrong. Help me out please.

• javascript
• node.js
• typescript

Share Improve this question Follow edited Jul 7, 2021 at 11:52 asif.ibtihaj asked Jul 4, 2021 at 20:24 asif.ibtihajasif.ibtihaj 40911 gold badge66 silver badges1515 bronze badges 3

• I had a similar with PHP. I found out that the base64 string changed during from Front-end to server, because some characters such as spaces or plus were modified – Gogu Gogugogu Commented Jul 4, 2021 at 20:35
• 2 Check whether this might help you: stackoverflow./questions/38658654/… – Shantanu Bharatia Commented Jul 4, 2021 at 20:36
• If your intention is to upload as a File to the server, where is it that you're un-encoding from base64? It looks like you're passing the still-encoded data to a Blob, and then making a file from that. You should unencode using the global atob() function, or load the base64 data as a data URI. – stephancasas Commented Jul 4, 2021 at 20:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I have figured out my problem. When I take image file input from my puter I get a base64 string like below -

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

But, when I convert it back into a file it expects a string like below -

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

So, basically, I had to trim the string accordingly to match the expected format and wrote a base64 to file conversion function following this answer. Here is my function to convert a base64 string to an image file

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

Convert Base64 to Javascript File object.

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: "",
// }

data:image/png; split function is limited to check with jpeg images only, for other cases, it might fail, split can be added based on base64, string to trim of first part and get the rest.

function dataURLToFile(dataUrl, fileName) {
  const [header, base64Data] = dataUrl.split(',');
  const mimeType = header.match(/:(.*?);/)[1];
  const binaryData = atob(base64Data);
  const byteArray = new Uint8Array(binaryData.length);
  for (let i = 0; i < binaryData.length; i++) {
      byteArray[i] = binaryData.charCodeAt(i);
  }
  // Créer un Blob à partir des données binaires
  const blob = new Blob([byteArray], { type: mimeType });
  const file = new File([blob], fileName, { type: mimeType });
  return file;

} it shoud work normally. But make sure that the string you're receiving is a good one .

本文标签： javascriptBase64 to Image File Convertion in JSStack Overflow