[JS] FileReader를 사용하여 file을 Base64 문자열로 변환하기

보통 파일 업로드를 할 때 폼데이터(FormData)를 사용하여 파일을 전송하지만, 이번에는 서버 측에서 Base64 문자열로 파일을 전송해 달라는 요청을 받았다.

---

 

FileReader를 사용하여 파일 읽기

readAsDataURL 매서드를 사용하여 base64 문자열로 변환했다.

    // 파일 -> base64 로 변환하는 함수
    async getFileBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        // 파일을 Base64 데이터 URL로 읽음
        reader.readAsDataURL(file);

        // 파일을 읽는데 성공했을 때 호출되는 콜백
        reader.onload = () => {
          const base64String = reader.result.split(',')[1]; // Base64 부분만 추출
          resolve(base64String);
        };

        // 파일을 읽는데 실패했을 때 호출되는 콜백
        reader.onerror = error => {
          reject(error);
        };
      });
    }

// 사용 - 여러개일 경우 for문으로 돌려서 
await this.getFileBase64(files[0]);

 

 

 

 

 

 

 

참고

https://inpa.tistory.com/entry/JS-📚-Base64-Blob-ArrayBuffer-File-다루기-정말-이해하기-쉽게-설명