Image 또는 파일을 업로드 할 경우 base64로 변환하여 서버에 올리는 방법에 대하여 알아봅니다.

서버에 이미지를 올릴때 파일을 직접 전송할 수도 있지만 데이터를 bade64로 인코딩한 후 업로딩 하는 방법도 많이 사용됩니다. 올라간 데이터는 다시 파일로 변환하거나 데이터베이스에 바로 저장하여 사용할 수 있을 것입니다. 그렇다면 어떻게해야 base64로 인코딩, 변환할 수 있을까요?



# 업로드 할 파일 base64 인코딩하기

먼저 자바스크립트의 FileReader 내부객체를 사용하여 파일에 접근할수 있습니다. 이때 변수를 만들어 객체를 생성하여 해당 파일의 결과인 인코딩 값을 얻게됩니다. 아래 코드를 봐주세요.

! Step 1
아래와 같이 input에 파일이 담긴 경우입니다.
<input type="file" id="myFile" />

! Step 2
reader라는 변수에 FileReader() 내장객체를 사용하기 위해 인스턴스를 담는다.

var file = document.querySelector('#myFile');
var result;

// 정상 로드시 result에 인코딩 값을 저장하기
var reader = new FileReader(file);
reader.onload = function() {
  result = reader.result;
}

// 실패할 경우 에러 출력하기
reader.onerror = function (error) {
   console.log('Error');
};

파일이 정상적으로 읽혀지면 result에 인코딩 값을 저장, 반환하게됩니다. 이 값을 서버에 전송하여 사용할 수 있을 것입니다.



# Base64 업로드한 이미지 출력하기이번에는 저장된 base64를 다시 출력하는 방법입니다. 만약 위에서 변환된 코드를 데이터베이스등의 저장소에 저장한 경우 이를 불러와 다시 출력하는 방법을 알아봅니다 
<span>Database image : </span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACISURBVDhPzYvLEYAwFALtzKvF21PEQPSFfHTGizucgF3SB/ryuu0xahtcNi1Gj0Al27uNfoVbtt8oemck22MeKmAoswfWIxoo24Zwu7AVYd+RORjdz69khNuFrQj7Uwa2IeyB9YiGiTwJFSAZ2GMUvTO3DOzXRr9CJQN7x+gRcJk8aqQvvyKlA6eGPYq2034+AAAAAElFTkSuQmCC" alt="Blue Circle">

위 img 태그는 불러온 인코딩 텍스트를 src 속성에 추가하였습니다. 이를 웹상에서 추가하면 아래와 같이 잘 나오게됩니다.


! Outlook email html에 적용하면?
email HTML에 적용하면 어떻게 나올지 정상적으로 출력될지 테스트 해보았습니다. 결과적으로 Outlook에서 정상적으로 나타나지 않더군요... 아쉽지만 email HTML에 사용은 어렵다는 결론입니다.


! 실제로 적용한 코드모습
Database image : Blue Circle

위에 나타난 파란원이 바로 base64 이미지를 불러와 img 태그로 출력한 부분입니다.