토이 프로젝트 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

토이 프로젝트

undefined주차

이*완

・

추천

・

조회수

답변 완료

토이 프로젝트를 하면서 이미지를 저장하고 글을 써서 db에 저장 하면 이미지 경로에 fakepath 라고 떠서 이 fakepath를 지우고 저장 하고 싶은데 어떻게 해야할까요?

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>writing</title>
    <link href="https: //fonts.googleapis.com/css2? family= 노토+산스+KR:wght@100;300 &family= Noto+Serif & display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif', serif;
        }

        .write_title {

            max-width: 2000px;
            width: 100%;
            height: 150px;

            background-image: url("data:image/jpeg;base64,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");
            background-position: center;
            background-size: cover;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .write_box {
            max-width: 1200px;
            width: 95%;
            width: 500px;

            margin: 100px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;
        }

        .preview{
           width: 460px;
            height: 200px;
            margin: 10px 0px 10px 0px;
        }
        .btn-light{
            margin: 10px auto 0px 150px;
        }

        .t

    </style>
<script src="http://madalla.kr/js/jquery-1.8.3.min.js"></script>

<script >
    $(function() {
        $("#myFile").on('change', function(){
        readURL(this);
        });
    });
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            $('#View').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }



    function save_write() {
            let image = $('#myFile').val()
            let comment = $('#comment').val()
            let day = new Date()


        $.ajax({
                type: "POST",
                url: "/write",
                data: { image_give:image, comment_give:comment, day_give:day.toLocaleDateString('ko-kr')},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
</script>

</head>

<body>
<div class="write_title">
    <h1>Instargram</h1>
</div>
<div class="write_box">

<!--accept=".gif,.jpg,.png"-->

    <input type='file' id="myFile" />
    <img  src="#" alt="이미지 미리보기" class="preview" id="View" />



    <textarea class="form-control" placeholder="20 글자 이상 작성 해주세요." id="comment"
                  style="height: 100px"></textarea>
    <label for="comment"></label>


    <a onclick="save_write()" type="button" class="btn btn-light" id="" >저장하기</a>




</div>

</body>

</html>

app 파일입니다

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

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


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

@app.route("/write", methods=["POST"])
def write_post():
        image_receive = request.form['image_give']
        comment_receive = request.form['comment_give']
        day_receive = request.form['day_give']

        write_list = list(db.write.find({},{'_id':False}))
        count = len(write_list) +1

        doc = {
             'num':count,
             'image':image_receive,
             'comment':comment_receive,
             'day': day_receive
        }
        db.write.insert_one(doc)
        return jsonify({'msg': '저장 완료!'})


@app.route("/write", methods=["GET"])
def write_get():
    return jsonify({'msg': 'GET 연결 완료!'})

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

댓글 알림