Flask（Part.17）｜ 【画像のアップロードと利用（概要編）】
目標
- 画像のアップロード方法の概要を理解する。
- アップロードした画像の利用方法について概要を理解する。
Flaskで画像を利用する方法
Flaskでの画像のアップロードと利用の概要
Flaskで、クライアント側（ユーザー）から画像をアップロードするにはHTMLフォームとFlaskのrequestオブジェクトを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Image Upload</title>
</head>
<body>
<h1>Upload an Image</h1>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>
{% if filename %}
<h2>Uploaded Image:</h2>
<img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
{% endif %}
</body>
</html>まず、HTMLのformタグで<input type=”file”>を使って画像をアップロードできるフォームを作成します。また、画像をフォームから送信する場合は、フォームが画像を送信できる形式にするためにenctype属性に”multipart/form-data”を指定します。
クライアント側から送信された画像は、Flaskのrequest.filesを使ってサーバー側で受け取ります。request.filesは、フォームで送信されたファイルデータを格納しているオブジェクトです。例えば、画像を取得するにはrequest.files[‘image’]でアクセスします。
受け取った画像は、Flaskアプリケーション内でプログラムを使ってアップロード先のフォルダ（例えば、uploadsフォルダ）に保存します。このとき、file.save()メソッドを使用して、指定したパスに画像を保存します。
from flask import Flask, request, render_template, send_from_directory
import os
from werkzeug.utils import secure_filename
app = Flask(__name__)
# アップロード先のフォルダを指定
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['MAX_CONTENT_LENGTH'] = 5 * 1024 * 1024 # 5MBのサイズ制限
# アップロード先フォルダの作成
if not os.path.exists(app.config['UPLOAD_FOLDER']):
os.makedirs(app.config['UPLOAD_FOLDER'])
# アップロード可能な拡張子のリスト
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[ 1 ].lower() in ALLOWED_EXTENSIONS
@app.route('/', methods=['GET', 'POST'])
def upload_image():
if request.method == 'POST':
file = request.files['image']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename) # 安全なファイル名に変換
file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
file.save(file_path) # ファイルの保存
return render_template('upload.html', filename=filename) # アップロードした画像を表示する
return render_template('upload.html')
@app.route('/uploads/<filename>')
def uploaded_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
if __name__ == '__main__':
app.run(debug=True)
画像ファイルは、一般的にサーバー内の特定のディレクトリ（例えば、uploads/）に保存します。このディレクトリは、静的なファイルが配置される場所としてFlaskのstaticディレクトリとは別に指定することが一般的です。
Flaskアプリケーションで画像をアップロードするフォルダ名は、プロジェクトの構成や用途に応じて適切な名前を選ぶと良いです。一般的には以下のように使われます。
uploads：より一般的な名前で、アップロードされたファイルを保存するためのフォルダとしてよく使用されます。特に、画像だけでなく、PDFやその他のファイルも扱う場合に適しています。
images： 画像のみをアップロードする場合に特化した名前として使うことができます。
もし画像ファイルのみを扱うのであれば、imagesという名前のほうが直感的ですが、さまざまなタイプのファイルをアップロードする予定なら、uploadsが好ましいでしょう。
アップロードされた画像をWebページに表示するには、HTMLの<img>タグを使います。画像ファイルのURLは、サーバー上で指定した保存場所に基づきます。
<img src="{{ url_for('uploaded_file', filename='image.jpg') }}" alt="Uploaded Image">Flaskで保存した画像にアクセスするためには、Flaskのurl_forを使って画像のURLを生成します。
@app.route('/uploads/<filename>')
def uploaded_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)アップロードされた画像が正しい形式であるか、サイズが適切であるかをチェックするバリデーションを行うことも重要です。
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[ 1 ].lower() in ALLOWED_EXTENSIONSアップロードされた画像がこの条件に合致するかを確認します。
if file and allowed_file(file.filename):
file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))画像をアップロード後にリサイズや加工を行うこともできます。Flaskでの画像処理には、Pillow（PIL）というライブラリを使用します。
from PIL import Image
@app.route('/', methods=['POST'])
def resize_image():
file = request.files['image']
if file:
img = Image.open(file)
img = img.resize((100, 100)) # サイズ変更
img.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
return 'Image resized and uploaded!'以上が画像のアップロードと利用の概要です。
今回は以上になります。
ブックマークのすすめ
「ほわほわぶろぐ」を常に検索するのが面倒だという方はブックマークをお勧めします。ブックマークの設定は別記事にて掲載しています。
