자바스크립트 File to Base64 | Base64 to File 구현하기

2024-03-25

---

 

---

1. 방법

 

File to Base64

 

전달받은 파일 정보를 FileReader로 읽어 들여 base64 문자열을 만드는 코드이다.

 

//실제 파일을 base64로 변환하는 코드 
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    reader.onerror = () => {
      reader.abort();
      reject(new Error('파일을 읽는 도중 오류가 발생했습니다.'));
    };
    
    reader.onload = () => {
      resolve(reader.result);
    };

    reader.readAsDataURL(file);
  });
}

// 사용 예제
async function processFile(file) {
  try {
    const base64Data = await fileToBase64(file);
    //base64Data.result
    console.log(base64Data);
  } catch (error) {
    console.error(error);
  }
}

---

Base64 to File 

 

매개 변수로는 Base64 로 인코딩된 이미지 파일 정보와 / 파일명 / 파일 타입을 매개 변수로 받는다.  Base64 문자열을 우선 atob로 변경한 후 해당 루프를 돌면서 Uint8 Array에 담은 후 파일로 변환하는 방식이다.

 

function base64ToFile(base64String, fileName, fileType) {
    let atobObj = atob(base64String),
        n = atobObj.length,
        u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = atobObj.charCodeAt(n);
    }
    // File 객체 생성
    return new File([u8arr], fileName, {type: fileType});
}

---

메인 이미지 출처 : 사진: Unsplash의NEOM