파이썬(Python)/Flask

[Python] Flask로 파일 업로드 웹페이지 만들기(werkzeug, files, upload)

끄적끄적아무거나 2021. 11. 27. 11:23
반응형

 

목차

     

     

     

     

     

     

    Flask 파일 업로드 방법

     

     

    HTML의 enctype 속성의 값을 multipart/form-data 로 하고 올리고자 하는 파일을 form을 사용해서 특정 URL에 보냅니다. Flask에서는 해당 URL에서 request.files 객체를 사용해서 저장합니다. 

     

    파일을 올릴때 werkzeug 라이브러리의 secure_filename 함수를 사용하면 안정적으로 올릴 수 있습니다. werkzeug (벨져크)는 웹서버 interface를 설계할때 규약에 맞춰 설계할 수 있게 도와 주는 툴이라고 보시면 됩니다. 

     

    예전 버전은 아래와 같이 import 하였습니다.

    from werkzeug import secure_filename

     

    하지만 최근 버젼을 사용한다면 아래와 같은 에러 메세지가 나옵니다.

     

    ImportError: cannot import name 'secure_filename' from 'werkzeug'

     

    최근 버전은 아래와 같이 import를 하셔야 합니다.

     

    from werkzeug.utils import secure_filename

     

     

    다음으로 파일 업로드(File upload)할 위치나 파일 사이즈(File Size)에 대한 정의도 미리 환경 변수에서 가능합니다. 아래 환경 변수를 사용한다면 미리 설정할 수 있습니다.

     

    • app.config[‘UPLOAD_FOLDER’]
    • app.config[‘MAX_CONTENT_PATH’]

     

    첫번째가 업로드 폴더명이고, 다음은 파일 사이즈 입니다.

     

    만일 별도의 설정을 안하신다면 python flask를 실행하는 위치로 파일이 올라 옵니다.

    반응형

     

     

     

    Flask 파일 업로드 예제 구현하기

     

    이번 예제에 필요한 파일은 총 2개 입니다.

     

    파일을 업로드 하기위해 form을 만들 HTML 파일과 flask 구현을 위한 파이썬 파일 입니다.

     

    파이썬 코드>>

    from flask import Flask, render_template, request
    from werkzeug.utils import secure_filename
    
    app = Flask(__name__)
    
    @app.route('/file_upload', methods = ['GET', 'POST'])
    def file_upload():
        if request.method == 'POST':
            f = request.files['file']
            f.save(secure_filename(f.filename))
            return '파일이 저장되었습니다'
        else: 
            return render_template('file_upload.html')
    		
    if __name__ == '__main__':
        app.run(port="9999",debug = True)

     

    9번 라인 : HTML form으로 전달한 파일 정보를 f에 저장합니다.

    10번 라인 : save 함수와 secure_filename으로 파일을 저장합니다.

     

     

     

    file_upload.html>>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>scribblinganything.tistory.com</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container-sm">
          <form action = "http://localhost:9999/file_upload" method = "POST" 
             enctype = "multipart/form-data">
             <input type = "file" name = "file" />
             <input type = "submit"/>
          </form>
        </div>
    </body>
    </html>

     

     

     

    결과>>

    아래 그림과 같이 파일 선택을 눌러 그림 파일을 선택하여 제출을 클릭 합니다.

     

    그리고 제 파이썬이 동작되는 폴더에 파일이 저장되었습니다.

     

     

    반응형