[2019.11.02] base64 Image Data를 File 객체로 변환하는 법

프로필 이미지를 적용하는 기능을 구현 중, 엄청나게 유용한 라이브러리를 찾아냈다.

https://github.com/mosch/react-avatar-editor

mosch/react-avatar-editor

 

이 라이브러리를 쓰면, Input File 객체로 받은 이미지 데이터를, 유저가 지정한 부분만 Base64인코딩을 통해 잘라내어 반환하게 된다.

그러나 AWS S3 버킷에 저장하기 위해서는 File객체가 필요로 한데, 반환받은 Base64 이미지 데이터로는 바로 사용할 수가 없다.

 

그래서 Base64 데이터를 다시 File 객체로 변환하는 하는 방법을 찾아보니, 아래와 같은 방법으로 해결할 수 있었다.

const dataURLtoFile = (dataurl, fileName) => {
 
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);
            
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        
        return new File([u8arr], fileName, {type:mime});
    }
    
    //Usage example:
    var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
    console.log(file);

 

# 참조

https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f/38935990

How to convert Base64 String to javascript file object like as from file input form?