파일 업로드

파일 업로드 예제

 

PYTHON

@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')

    filename = f'file-{mytime}'

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)  ## save_to는 경로


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

    db.diary.insert_one(doc)

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

 

/diary POST 요청 들어온걸

받는다.

 

file은 request에서 form이 아닌 files로 받는다.

 

.jpg, .png등을 구분하기 위하여

 

extension 변수를 정해준다.

 

파일명이 서로 겹치지 않게 하기 위해

datetime을 활용하여 filename을 정해준다.

정해 줄때는 f' 를 활용하여 변수 값을 { } 으로 가져와 준다.

 

딕셔너리를 만들고 db에 저장한다.

 

 

 

HTML

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

     // 파일 부르는 것
    // file 아이디의 0번째 태그, .files는 파일들인데 그 중에 0번쨰 것
    let file = $('#file')[0].files[0]


    // form_data 값을 만들어서 한번에 태운다.
    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 활용과 좀 다르게 form date.append를 통하여 서버쪽으로 보내준다.