MongoDB로 이미지 파일 업로드&출력하기 Python/Flask/Html

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

MongoDB로 이미지 파일 업로드&출력하기 Python/Flask/Html

undefined주차

이*빈

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

GET/POST 방식으로 MongoDB에 이미지 파일을 넣고 이걸 다시 Html로 출력하고 싶습니다

보통은 mongoDB에 이미지를 저장하진 않겠지만 이제 배우는 입장이라 이미지를 따로 저장할 storage가 없어서 선택한 방법입니다

개인적으로 찾아본 결과 mongoDB의 Gridfs 기능을 이용하면 파일(이미지,gjf,pdf)을 분할/변환 시켜 document형태로 DB에 저장할수있다는것을 알게됐습니다

https://grapestore.tistory.com/25 << 참고한 사이트

문제는 이걸 다시 받아와 HTML에 찍어낼 방법을 잘 모르겠습니다 (GET방식으로 받아와야하는건가???)

일단 DB에 fs.file 과 fs.chunks 라는 두 폴더에 이미지가 분할 저장되는거 같은데 두 폴더에 저장된 doc는 공통된 id값을 가지고 있었습니다

이걸 이용하면 Html 찍어낼수있을거 같아서 또 찾아본 결과

https://taehyeki.tistory.com/159 << 여기서 DB에 저장된 이미지파일을 인코딩/디코딩해서 Html로 출력할수있는 방법을 보여주고 있는거 같기는한데

무슨 원리인지 잘 모르겠습니다

MongoDB에 각각 fs.file / fs.chunks에 저장된 doc 입니다

작성한 코드 및 에러 메세지

api
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import gridfs

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://test:sparta@cluster0.8q7d5by.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

@app.route('/')
def home():
   return render_template('index.html')

@app.route("/upload", methods=['POST'])
def upload():
        ## file upload ##
        img = request.files['image']

        ## GridFs를 통해 파일을 분할하여 DB에 저장하게 된다
        fs = gridfs.GridFS(db)
        fs.put(img, filename='name')

        ## file find ##
        data = client.grid_file.fs.files.find_one({'filename': 'name'})

        return jsonify({'msg': '저장에 성공했습니다.'})

if __name__ == '__main__':
   app.run('0.0.0.0', port=3000, debug=True)

html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
    <title>스파르타</title>
</head>

<style>
</style>
    <script>

    </script>
<head>
<body>

<div>
    <form action="/upload" method="post" id="uploadForm" enctype="multipart/form-data">
        <label>이미지 첨부</label>
        <input type="file" id="imgname" name="image" class="form-control" placeholder="" multiple>
        <input type="submit" class="btn btn-primary btn_location" value="Submit">
    </form>
</div>

</body>
</head>

</html>

이건 DB에 이미지 파일을 저장할때 사용한 코드 입니다

댓글 알림