Typescript – 이미지를 Base64로 인코딩

Base64는 데이터를 안전하게 전송하고 저장하기 위한 암호화 방법 중 하나입니다. 이 프로세스는 바이너리 데이터를 안정적으로 전송하거나 저장할 수 있도록 텍스트 형식으로 변환합니다. 따라서 파일을 Base64로 인코딩하면 바이너리 데이터를 안전하게 전송하거나 저장할 수 있는 텍스트 데이터로 변환할 수 있습니다.

이 문서에서는 파일을 base64로 인코딩하는 방법을 보여줍니다. Base64 인코딩은 프로그래밍 언어에서도 일반적으로 사용됩니다. 따라서 이 글을 사용하는 기본 사항을 익히면 많은 프로그래밍 언어로 된 파일을 자신 있게 다룰 수 있을 것입니다.

이미지를 Base64로

이미지를 base64로 변환하면 이미지 파일을 서버에 별도로 저장하지 않고 일반 텍스트로 로드할 수 있습니다.
아래는 API 응답으로부터 받은 데이터를 arraybuffer로 Base64 변환한 예입니다.

먼저 이미지 파일을 arraybuffer로 가져와야 합니다.

export const getImageFile = () => {
  return axios.create({
    timeout: 10 * 1000,
    url: '/image',
    method: 'GET'
    responseType: 'arraybuffer',
  });
}

그런 다음 가져온 데이터는 아래 함수로 전송되고 base64로 변환됩니다.

export function imageToBase64(file: ArrayBuffer): Promise<string> {
  return new Promise((res, rej) => {
    const blob = new Blob((file), { type: 'image/png' });
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      const base64String = reader.result;
      res(base64String as string);
    };
  });
}

그리고 가져온 데이터를 위의 방법으로 이미지 src에 적용하면 base64로 인코딩된 데이터를 화면에 불러올 수 있습니다.

const response = await getImageFile();
const imageData = await imageToBase64(response.data);

<img :src="imageData">

이렇게 사용하시면 불러온 이미지 파일을 base64로 변환하여 사용하시면 됩니다.

Base64의 파일

이미지 이외의 파일은 다음과 같이 사용할 수 있습니다.

export function fileToBase64(file: File) {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onLoad = () => {
      const base64 = reader.result;
      res(base64);
    }
  });
}

다음 시간에는 위에서 사용한 FileReader 함수와 서버에서 응답 데이터로 오류 값이 반환되었을 때 데이터가 어떻게 관리되는지 살펴보도록 하겠습니다.

감사해요