[JS] base64 이미지 File 객체로 변환하기

0. 개요

react-cropper를 사용하던 중, url 형식으로 되어있는 이미지를 File 객체로 변환하여 백엔드로 전송해주어야 하는 경우가 발생했습니다.

 

base64 형식의 이미지를 File 객체로 변환해주는 방법 2가지를 정리해보도록 하겠습니다. (react-cropper Sandbox 코드를 참고하였습니다.)

 

1. 반복문을 사용하는 방법

const dataUrlToFile = (url: string, fileName: string) => {
  const [mediaType, data] = url.split(",");

  const mime = mediaType.match(/:(.*?);/)?.[0];

  var n = data.length;

  const arr = new Uint8Array(n);

  while (n--) {
    arr[n] = data.charCodeAt(n);
  }

  return new File([arr], fileName, { type: mime });
};

 

2. Fetch를 사용하는 방법

const dataUrlToFileUsingFetch = async (
  url: string,
  fileName: string,
  mimeType: string
) => {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();

  return new File([buffer], fileName, { type: mimeType });
};

 

참고 : https://codesandbox.io/p/sandbox/old-snow-fkw3l?file=%2Fsrc%2Futils.ts%3A17%2C1-26%2C3

https://codesandbox.io/p/sandbox/old-snow-fkw3l?file=%2Fsrc%2Futils.ts%3A17%2C1-26%2C3