Back to Blog

Flaskで画像アップロード機能を実装する方法

flask

2024年7月20日

【Pythonの基礎、アルゴリズム、ソフトウェアアーキテクチャの学習はこちら】

こんにちは！

今回の記事では、Flaskで画像アップロード機能を実装する方法を解説します。

画像アップロード機能はWebアプリケーションでよく使われる機能です。画像アップロードの実装方法がわからない方のために、サンプルアプリを作成しながらアップロード機能を実装する方法について解説します。

Flaskで画像アップロード機能を実装する方法

Flaskのインストール

まず、Flaskのインストールをします。

pip install flask

Flaskアプリケーションの設定

Flaskアプリケーションの基本的な設定を行います。以下のように設定します。

from flask import Flask, request, redirect, url_for, render_template
import os
from werkzeug.utils import secure_filename

app = Flask(__name__)

# アップロードされたファイルを保存するディレクトリ
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 許可するファイルの拡張子
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

画像アップロードに必要な部分のコードを解説します。

8行目のUPLOAD_FOLDER = ‘uploads’では、アップロードされたファイルを保存するディレクトリを指定しています。uploadsディレクトリ内にアップロードした画像が保存されます。

9行目のapp.config[‘UPLOAD_FOLDER’]は、アップロードディレクトリをFlaskアプリの設定に追加します。

12~16行目は、許可するファイル拡張子を定義しています。その後にallowed_file関数で、アップロードしたファイルの拡張子が許可されたリストに含まれているかを確認しています。

ファイルアップロードのルートを設定

次にアップロードする画面の処理を記述します。

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # ファイルがリクエストに含まれているかを確認
        if 'file' not in request.files:
            return redirect(request.url)
        
        file = request.files['file']

        # ファイルが選択されているかを確認
        if file.filename == '':
            return redirect(request.url)

        # 許可されたファイル形式かを確認
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect(url_for('uploaded_file', filename=filename))
    
    return render_template('index.html')

こちらのコードでは、フォームから画像データをPOSTされた場合に保存処理を行います。

まず、5行目のif文では、ファイルが送信されているかを確認します。11行目では、ファイル名が空でないか(ファイルが正しく選択されているか)を確認します。

ファイルが正しく送信された場合は、先ほど定義した、allowd_file関数を使って、ファイルがきょかされた拡張子かどうかをチェックします。

secure_filename関数では、ファイル名を安全な形式に変換します。その後、file.saveでファイルを保存しています。

アップロードされたファイルを表示するルートを設定

次に、ファイルを画面上に表示する設定をします。/uploads/[ファイル名]にアクセスがあった場合は、アップロードした画像を表示させます。

from flask import send_from_directory

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

if __name__ == '__main__':
    app.run(debug=True)

send_from_directory(app.config[‘UPLOAD_FOLDER’], filename)の部分で、指定されたディレクトリからファイルを送信しています。

テンプレートの作成

次にフロント部分の作成です。templatesディレクトリ配下に、index.htmlを作成します。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload</title>
</head>
<body>
    <h1>Upload a new Image</h1>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="Upload">
    </form>

    {% if filename %}
    <h2>Uploaded File:</h2>
    <img src="{{ url_for('uploaded_file', filename=filename) }}">
    {% endif %}
</body>
</html>

画像を送信する10~13行目でファイルをアップロードするフォームを定義しています。画像を送信する場合は、formタグにenctype=”multipart/form-data”を付けましょう。