flask 이미지 파일 업로드하기

기존에 코딩 공부를 하면서 텍스트 위주의 데이터를 업로드 하기위한 코드는

@app.route('/diary', methods=['POST'])
def save_diary ():
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    doc = {
        'title': title_receive,
        'content': content_receive,
    }

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

이런식으로 코드를 작성했다.

---

이미지를 업로드 할때는 기존의 코드에

    # 파일 저장을 위한 부분
    file = request.files["file_give"]

    # 파일 확장자
    extension = file.filename.split('.')[-1]

    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S')

    filename = f'file-{mytime}'

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)

위에 작성한 코드를 추가해 주었고, 전체 코드는

@app.route('/diary', methods=['POST'])
def save_diary ():
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    # 파일 저장을 위한 부분
    file = request.files["file_give"]

    # 파일 확장자
    extension = file.filename.split('.')[-1]

    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S')

    filename = f'file-{mytime}'

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)

    doc = {
        'title': title_receive,
        'content': content_receive,
        'file': f'{filename}.{extension}'
    }

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

이런 식으로 작성이 된다.

---

마찬가지로 프론트단에서도 파일을 불러오기 위해서 코드를 수정해 주었는데 기존 텍스트만 받아오면 되는 기존 코드는

function posting() {
            let title = $('#title').val()
            let content = $('#content').val()

            $.ajax({
                type: "POST",
                url: "/diary",
                data: {title_give: title, content_give: content},
                success: function (response) {
                    alert(response['msg'])
                }
            })
            window.location.reload()
        }

이렇게 작성했지만, 이미지를 받아서 처리해야 하기 때문에 마찬가지로 코드를 추가하고 수정해주면

        function posting() {
            let title = $('#title').val()
            let content = $("#content").val()

            // 파일을 보내기 위한 코드
            let file = $('#file')[0].files[0] // id file의 0번째 태그의 files 중 0 번째 파일
            let form_data = new FormData()

            form_data.append("file_give", file)
            form_data.append("title_give", title)
            form_data.append("content_give", content)

            $.ajax({
                type: "POST",
                url: "/diary",
                data: form_data,
                // 파일을 보내는데 필요한 기본 세팅이 되어있지 않을 수 있기 떄문에 false로 설정
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

이런식의 ajax 전체 코드가 완성된다.