😂 머신러닝 팀 프로젝트

😭 사진 업로드 및 게시

• 우리 팀이 정한 것과 같이 사용자가 물고기의 사진을 업로드하게 되면, 해당 사진을 db에 저장하는 것과 동시에 사용자에게 보여줄 수 있도록 하였다.
• 사진의 경로를 db에 저장하는 것은 이미 저번 주에 마무리하였지만, 해당 사진을 저장하는 동시에 사용자에게 제시하는 것에서 많은 문제가 있었다.
• 문제점
  • 1. ajax 콜을 하게 되면 Live Server가 자동으로 새로고침되었다.
    • 우리는 이번 프로젝트에서 VS Code를 사용하였다. Live Server를 사용하게 되면서 위의 문제점이 발생하였고, 엄청난 시간을 들여 구글링을 하고 지인찬스도 써봤지만 해결하지 못했다.
    • 오늘 준태 튜터님께 여쭤봤는데 Live Server의 설정을 수정하는 것을 알려주셨다.
      확장 - 라이브 서버 - 확장 설정 - settings.json에서 편집
      맨 아랫줄을 추가해 주었다.
      
    • 해당 작업을 통해 자동으로 새로고침되는 현상을 해결하였다.
  • 2. 경로 설정에서의 문제점
    • 이전까지 절대경로를 사용했었는데, 그때도 db에는 저장이 수월하게 되었다. 하지만 사진 저장이 되지 않아 상대경로를 사용해 보았다.
    • 따라서 아래와 같이 경로를 수정해 보았다.

@app.route("/upload", methods=['POST'])
@authorize
def upload_image(user):

    image = request.files['image_give']

    extension = image.filename.split('.')[-1]
    today = datetime.now()
    mytime = today.strftime('%Y%m%d%H%M%S')

    filename = f'{mytime}'

    save_to = f'backend/fish/{filename}.{extension}'

    image.save(save_to)
    save_to = "../" + save_to

    user = user['id']

    doc = {
        'image': save_to,
        'user_id': user
    }
    db.image.insert_one(doc)
    return jsonify({'result': 'success', 'user_id': user, 'save_to': save_to})

경로 수정 후, db에도 파일의 이름이 잘 들어가고, 우리가 그토록 원했던 프리뷰 기능도 img 태그의 src를 통해 잘 적용할 수 있었다.