내일배움캠프 15일차 _ 강만다 프로젝트(5일차)

오늘은 정말 마지막에 진이 다 빠졌다...

오타 때문에 오류난걸 몇시간을 붙잡고 있었다니...

팀원들에게 민폐끼치기 싫어서 혼자 해결하려다가 공유해서 같이 해결해보려고 했는데

결국 팀장님이 오타를 찾아주셨다ㅎㅎㅎㅎㅎㅎ

자책하는 나레기에게 진정한 개발자가 됐다고 응원해주신

우리 5지조 팀원분들 너무 감사합니다😉

제 TIL 보고 계시죠?ㅎ

아래는 오늘 심화강의를 들으면서 짠 코드이다!

---

@app.route('/posts/create', methods=['POST'])
def post_upload():
    author_receive = request.form['author_give']
    title_receive = request.form['title_give']
    address_receive = request.form['address_give']
    contents_receive = request.form['content_give']

    file = request.files['file_give']

    save_to = 'static/mypicture.jpg'
    file.save(save_to)

    count = db.articles.count()
    # 게시글 삭제시 중복 가능 ->   존재하는  number +1 로 바꿔야함
    if count == 0:
        count = 1
    elif count > 0:
        count = count + 1

    doc = {
        'author': author_receive,
        'title': title_receive,
        'contents': contents_receive,
        'address': address_receive,
        "number": count,
    }

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

 

$(document).ready(function () {
            bsCustomFileInput.init()
        })

        function post_upload() {
            let author = $("#author_box").val()
            let title = $("#title_box").val()
            let address = $("#address-box").val()
            let content = $("#contents_box").val()

            let file = $('#file')[0].files[0]
            let form_data = new FormData()

            form_data.append("file_give", file)
            form_data.append("author_give", author)
            form_data.append("title_give", title)
            form_data.append("address_give", address)
            form_data.append("content_give", content)

            console.log(form_data)

            $.ajax({
                type: "POST",
                url: "/posts/create",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    location.replace('/posts')
                }
            });
        }

 

---

처음에는 author, title, address, content를 받아서 db에 넣고 보여주게 짰었는데

사진 업로드 기능을 추가하면서 조금 수정을 하게됐다.

위 코드 중

file = request.files['file_give']

    save_to = 'static/mypicture.jpg'
    file.save(save_to)

이 코드와 ↑

let file = $('#file')[0].files[0]
            let form_data = new FormData()

            form_data.append("file_give", file)
            form_data.append("author_give", author)
            form_data.append("title_give", title)
            form_data.append("address_give", address)
            form_data.append("content_give", content)

            $.ajax({
                type: "POST",
                url: "/posts/create",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    location.replace('/posts')
                }
            });
        }

이 코드를↑ 쓰는 이유는

사진 업로드 기능을 위해서 쓴다.

사진을 업로드 하기 위해서는 같이 받아야하는 데이터를

FormData로 받아 이미지는 static 폴더에 저장, 나머지 데이터는 db에 넣어야한다.

(제대로 이해한거 맞겠지?)

 

오늘 찾아온 멘붕은 저기까지 나름대로 받아드리면서 짰는데

변수명에 오탈자 때문에 동작이 되지 않아.... 멘붕....

다음번엔 오탈자 체크부터 해야겠다^^