Flask Image upload

서버 컴퓨터에 이미지 파일을 저장하고, 해당 이미지의 이름만 DB에 저장하는 방식이다.

이름을 통하여 이미지를 찾아낸다. 

 

write.html (이미지 업로드 페이지)

function posting() {
  let file = $('#chooseFile')[0].files[0]
  let form_data = new FormData()
  console.log(file);

  form_data.append("filename_give", file)

  if (!file) {
    alert('이미지를 업로드해 주세요.');
    return;
  }

  $.ajax({
      type: "POST",
      url: "/upload_page",
      data: form_data,
      cache: false,
      enctype: "multipart/form-data",
      contentType: false,
      processData: false,
      success: function (response) {
          alert(response["msg"])
      }
  });


}


<div class="header">
            <img class="back-img" src="../static/images/back@3x.png">
            <p id="posting_text"><b>POSTing</b></p>
            <img class='upload_image' onclick="posting()" src="../static/images/plus.png">
        </div>
        <div class="screen">
            <div class="img-container">
                <div id="drop-file" class="drag-file">
                    <label class="file-label" for="chooseFile">
                    <img src="../static/images/upload.png" alt="파일 아이콘" class="image"></label>
                    <input class="file" id="chooseFile" type="file" onchange="dropFile.handleFiles(this.files)"
                        accept="image/png, image/jpeg, image/gif">

                    <img src="" alt="미리보기 이미지" class="preview">
                </div>
            </div>

           
        </div>

 

 

 

app.py

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

@app.route('/upload_page', methods=['POST'])
def file_upload():
    uploaded_files = request.files['filename_give']
    
    # 해당 파일에서 확장자명만 추출한다.
    extension = uploaded_files.filename.split('.')[-1]
    
     # 현재 시간을 파일 이름으로 만들어서 중복을 피한다.
    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S')
    filename = f'{file_user_receive} - {mytime}'
    
    파일 저장 경로 설정
    save_to = f'static/{filename}.{extension}'
    uploaded_files.save(save_to)
    date = datetime.today().strftime("%m{} %d{}")
    date = date.format('월', '일')

   	
    # DB에 추가한다.
    doc = {'img': f'{filename}.{extension}'}

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