javascript 이미지 불러오기 base64로 인코딩 이미지 db저장 이미지 미리보기

팀원들과 토이프로젝트를 진행하는데 이미지를 저장하는데 한참을 헤맸다

 

그냥 이미지를 불러오고 그대로 저장을 하면 로컬 위치에 저장이 되서 어떻게 해야하는지 찾고 또 찾았다

 

여러 방법이 있었지만 

 

이미지를 base64 인코딩 후 db에 저장하는 방법을 택했다

 

우선 이미지를 불러오려면

 

회원가입 시 이렇게 해서 불러왔다

 

<input type="file" accept="image/*" id="REGI_IMAGE" onchange="encodeImageFileAsURL(this);readURL(this)">

type="file" 파일

accept="image/*" 이미지 확장자

encodeImageFileAsURL(this)

은 이미지를 base64 인코딩을 위한 선언

 

var dataURL;

// 프로필이미지 base64 인코딩
function encodeImageFileAsURL(element) {

    var file = element.files[0];
    var reader = new FileReader();
    reader.onloadend = function () {
        dataURL = reader.result;
    }
    reader.readAsDataURL(file);
}

이렇게 base64로 인코딩을 진행하고

 

dataURL에 reader.result값을 저장한다 (이미지 base64 인코딩 값)

 

readURL(this)

는 이미지 미리보기를 위한 선언

 

// 프로필 사진 미리보기
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('preview').src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        document.getElementById('preview').src = "";
    }
}

이미지 미리보기인데 어디에 이미지를 보여줄 것이냐를

<div class="box" style="background: #BDBDBD;">
    <img class="profile" id="preview" src="">
</div>

에 불러왔다

 

이미지 미리보기, base64인코딩이 완료되었으니 이를 db에 저장만 하면 된다

 

function post_userinfo() {

    let user_image = dataURL;

    $.ajax({
        type: "POST",
        url: "/register/post",
        async: false,
        data: {
            image_give: user_image
        },
        success: function (response) {
            alert(response["msg"])
        }
    });
}

let user_image에 dataURL값을 저장 (위 dataURL에는 base64인코딩 값이 저장)

 

@bp.route('/post', methods=["POST"])
def register_post():
    # receive data from html
    image_receive = request.form['image_give']

    # DB data set
    doc = {
        'image': image_receive,
        'postwrite_pk': []

    }
    db.user.insert_one(doc)
    return jsonify({'msg': '가입 완료되었습니다!'})

이렇게 저장이 완료된다

 

순서로 따지면

1. 이미지를 불러온다. (onchange에 세미콜론을 통해 2개를 선언)
2. 불러온 이미지를 만들어둔 박스에 미리보기 그리고 동시에 불러온 이미지 base64 인코딩
3. 이미지를 base64로 인코딩 후 인코딩 된 값을 db에 저장

 

 

몇일을 헤매고 헤매다가 주변 분들에게 도움도 많이 받아서 해결했다

 

이미지를 저장하는법부터 base64인코딩, db에 등 이를 통해 많은 것들을 배웠다