[Javascript] base64 이미지 업로드 _ base64 to File 객체

[Javascript] base64 이미지 업로드 _ base64 to File 객체

 

base64 이미지 파일을 부득이하게 활용하게 되는 경우가 있다.

또는 quill js editor 사용 시 ql-image 파일이 base64로 나오게 된다.

 

이 때 백엔드 단에서 base64를 디코딩할지, 자바스크립트 단에서 처리할지 고민하게 된다.

base64를 자바스크립트 File 객체로 변환하여 처리하면 편하다.

 

 

■ base64 이미지 -> File 객체로 변환하는 함수

 

function base64toFile(base_data, filename) {

    var arr = base_data.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});
}

 

 

■ 활용

 

var file = base64toFile(base64, 'image_file.png');  // 함수를 호출하여 사용

base64toFile 함수에  base64 코드와 임시 파일 명을 넘기면

file 이라는 변수에는 base64가 File객체가 저장된다. 

 

var file = base64toFile(base64, 'image_file.png');  

var form_data = new FormData();

form_data.append("file", file);

 

base64를 File객체로 변환해서 백엔드단에서 편하게 처리할 수 있다.