커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
flask를 이용해서 DB에 이미지 업로드 후 불러오기
undefined주차
북마크
권*의
댓글
4
・
추천
0
・
조회수
55
조회수
55
답변 완료

flask를 이용해서 mongoDB에 '노래 제목'(title) / '노래 키'(code) / '노래 악보'(file) 을 저장한 후 불러오려고 하는데 이미지(악보)만 불러와지지 않습니다.


[오류 메시지: Not allowed to load local resource: file:///C:/fakepath/textimg.jpg]


이미지 업로드하는 단계에서 경로 지정이 문제가 되는 거 같은데 경로를 어떻게 지정할 수 있나요??


app.py 코드

# from crypt import methods
from pydoc import doc
from flask import Flask, render_template, request, jsonify


app = Flask(__name__, template_folder="templates")


from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:1234@cluster0.cgf7sxr.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

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

@app.route("/list")
def code():
    return render_template('list.html')

@app.route("/lists", methods=["GET"])
def score_get():
    score_list = list(db.score.find({},{'_id':False}))
    return jsonify({'scores':score_list})

@app.route("/upload")
def upload():
    return render_template('upload.html')

@app.route("/upload", methods=["POST"])
def upload_post():
    title_receive = request.form['title_give']
    code_receive = request.form['code_give']
    file_receive = request.form['file_give']
    
    doc = {
        'title': title_receive,
        'code': code_receive,
        'file': file_receive
    }

    db.score.insert_one(doc)

    # return jsonify({'msg':'저장 완료!'})


if __name__ == "__main__":
    app.run(host="localhost", port="5000", debug=True)


upload.html 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <title>악보</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='upload.css') }}">
        <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
        <script>
            $(document).ready(function(){
            });
            
            function posting() {
                let title = $('#title').val()
                let code = $('#code').val()
                let file = $('#file').val()


                $.ajax({
                    type: 'POST',
                    url: '/upload',
                    data: {
                        title_give: title,
                        code_give: code,
                        file_give: file
                    },
                    success: function (response) {
                    alert(response['msg'])
                }
            });
        }
        </script>
    </head>


    <body>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="index">🎵</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="list">리스트</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="title">제목</a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">PDF생성</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="upload">악보올리기</a>
                        </li>
                        </ul>
                        <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-secondary" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
        
        <div>
            <div class="input-group flex-nowrp titleselector">
                <label for="formFile" class="form-label">🔠 제목을 입력해 주세요</label>
                <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">제목 입력</span>
                    <input id="title" type="text" class="form-control" placeholder="이 곡의 제목은 무엇인가요" aria-label="Username" aria-describedby="addon-wrapping">
                </div>
            </div>
            <div class="codeselector">
                <label for="formFile" class="form-label">✅ 코드를 선택해 주세요</label>
                <select id="code" class="form-select" aria-label="Default select example">
                    <option selected>이 곡의 코드는 무엇인가요</option>
                    <option value="C">(C)</option>
                    <option value="D">(D)</option>
                    <option value="E">(E)</option>
                    <option value="F">(F)</option>
                    <option value="G">(G)</option>
                    <option value="A">(A)</option>
                    <option value="B">(B)</option>
                </select>
            </div>
            <div class="fileselector">
                <label for="formFile" class="form-label">📁 파일을 선택해 주세요</label>
                <input id="file" class="form-control" type="file" id="formFile">
            </div>
            <div class="uploadbox d-grid gap-2 col-6">
                <button onclick="posting()" type="button" class="btn btn-secondary btn-lg uploadbtn" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    파일 올리기
                  </button>
                  
                  <!-- Modal -->
                  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">성공!</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                            파일이 성공적으로 저장되었어요
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                            <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <button onclick="posting()" type="button" class="btn btn-secondary btn-lg uploadbtn">파일 올리기</button> -->
            </div>
        </div>
    </body>
</html>

list.html 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <title>악보</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='list.css') }}">
        <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
        <script>
            $(document).ready(function(){
                listing();
            });


            function listing() {
                $('#cards-box').empty()
                $.ajax({
                    type: 'GET',
                    url: '/lists',
                    data: {},
                    success: function (response) {
                        let rows = response['scores']
                        for(let i = 0; i < rows.length; i++) {
                            let title = rows[i]['title']
                            let code = rows[i]['code']
                            let file = rows[i]['file']


                            let temp_html = `<div class="col">
                                                <div class="card h-100">
                                                    <img src="${file}" class="card-img-top">
                                                    <div class="card-body">
                                                        <h5>${code}</h5>
                                                        <h5 class="card-title">${title}</h5>
                                                    </div>
                                                </div>
                                            </div>`
                            
                            $('#cards-box').append(temp_html)
                        }
                        console.log(response)
                    }
                })
            }
        </script>
    </head>


    <body>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="index">🎵</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="list">리스트</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="title">제목</a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">PDF생성</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="upload">악보올리기</a>
                        </li>
                        </ul>
                        <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-secondary" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
        <div class="btn-group sort">
            <button class="btn btn-secondary dropdown-toggle sortbtn" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
              정렬
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">코드</a></li>
                <li><a class="dropdown-item" href="#">제목</a></li>
            </ul>
        </div>
        <div class="mycards">
            <div class="mx-1 row row-cols-1 row-cols-md-4 g-4" id="cards-box">
                <div class="col">
                    <div class="card h-100">
                    <img src="#"
            class="card-img-top">
                        <div class="card-body">
                            <h5>(코드)</h5>
                            <h5 class="card-title">제목이 들어갑니다</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


리스트 페이지

스파르타 즉문즉답


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴