맛집 소개 서비스 3

사슐랭

어제 TIL 작성 이후로 계속 gridFS 관련해서 찾아보면서 진행해보았다.

import base64
import gridfs
fs = gridfs.GridFS(db)

base64랑 gridfs import 하는 부분...

@app.route("/menu", methods=["POST"])
def menu_post():

    cate_receive = request.form['cate_give']
    comment_receive = request.form['comment_give']
    size_receive = request.form['size_give']
    cost_receive = request.form['cost_give']
    star_receive = request.form['star_give']
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    menu_receive = request.form['menu_give']
    image_receive = request.files['image']
    
    ## 이미지 파일 fs에 put으로 삽입
    image_file = fs.put(image_receive, filename=image_receive.filename)
        
    doc = {
        'image' : image_file,
        'cate' : cate_receive,
        'name' : name_receive,
        'address' : address_receive,
        'comment' : comment_receive,
        'star' : star_receive,
        'menu' : menu_receive,
        'size' : size_receive,
        'cost' : cost_receive,
    }

    db.delicious.insert_one(doc)
    
    return jsonify({'msg':'저장 완료!'})

어제 저녁까지 해서 mongoDB에 저장까지는 할 수 있었는데 저장된 image file을 html로 불러오는 방식이 제대로 이해가 안되어서 일단은 이렇게 마무리 하였는데, 오늘 아침에 보니까 내일배움캠프 하시는 다른 분이 gridfs를 사용하신 TIL을 발견해서 도움을 받았다.

"감사합니다."

"출처: https://velog.io/@uiseongsang/"

@app.route("/menu", methods=["GET"])
def menu_get():

    all_menus = list(db.delicious.find({},{'_id':False}))     

    for menu in all_menus:
        image_id = menu['image']
        if image_id:
            try:
                image_data = fs.get(image_id).read()
                base64_image = base64.b64encode(image_data).decode('utf-8')
                ## 'data ....' 이 부분을 앞에 넣어줘야 img에 url로 사용 가능
                menu['image'] = 'data:image/jpeg;base64,' + base64_image    
            except gridfs.errors.NoFile as e:
                print("사진이 존재하지 않습니다.")   

    return jsonify({'result': all_menus})

위에 코드에서 menu['image'] = base64_image 이대로 하면 제대로 이미지가 로드가 되지 않았다. 블로그 글을 더 살펴본 결과 올려주신 링크를 맨 위에서 발견할 수 있었는데

https://www.base64-image.de/
이 링크를 타고 들어가 보면 image를 url로 표시할 때 앞 부분에 'data:image/jpeg;base64,' 이 부분이 포함되어 있는 것을 확인 할 수 있었다. 바로 붙여보니
이렇게 제대로 사진과 글이 표시되는 것을 확인할 수 있었다. (저 가게는 아직 안가봄)

어제 계속 사진 data가 binary로 표시되어 있어서 디코딩을 하고 json으로 넘겨줘야 할 거 같은데 디코딩이 계속 안되서 고민 중이였는데, base64를 사용하니 디코딩이 잘 되는 것을 확인할 수있었다.

궁금해서 base64에 대해서 조금 공부를 해보았다.

"Base64란 Binary Data를 Text로 바꾸는 Encoding의 하나로써 Binary Data를 Character set에 영향을 받지 않는 공통 ASCII 영역의 문자로만 이루어진 문자열로 바꾸는 Encoding이다."
라고 되어있다.

그냥 바로 디코딩을 하게 된다면 아스키 코드를 사용해야하는데 그 데이터에 이미지 같은 binary data가 포함되게 된다면 아스키 코드가 7 bit encoding이라서 데이터를 전달하기에 안전하지 않다고 한다.

따라서 '전송할 데이터에 포함된 binary 데이터가 안전하게 전송되기 위해서 base64를 사용한다' 라고 이해하면 될 거 같다.