자바스크립트 + file + base64 Encoding 예제

오늘, 개발해야 할 API에서 Base64로 이미지를 전송받겠다고 해서, 
html form에서 submit해서 보내도 되겠지만, 굳이 자바스크립트에서 base64로 인코딩해서 보낼 수 있는지 
궁금해 한 내가 챗-GPT에게 물어서 샘플 코드를 확보해 보았다.
누구나 그렇게 물어보면 된다고 생각하겠지만 사실 그렇게 능동적인 개발자가 많지는 않다. 
고지식하게 옛날부터 사용해오던 방식을 고수하기 마련이라... 
나중에 이해와 설득에 도움이 될 것 같아 정리해서 올려두는 내용. 

 

<input type="file" id="fileInput" />
<script>
  document.getElementById('fileInput').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function () {
      const base64String = reader.result.split(',')[1]; // 'data:image/png;base64,...'에서 base64 부분만 추출

      // 서버로 전송 (예: fetch)
      fetch('/upload', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ image: base64String }),
      });
    };

    reader.readAsDataURL(file); // Base64로 인코딩
  });
</script>

별스럽지 않지만 부담을 느끼는 분들을 위한 작은 배려?