flaskでPOSTで受け取った画像をbase64形式で表示する
実施したかった事
①htmlのFormから画像をPOST送信する
②POST送信された画像をbase64形式でブラウザ表示させる
(サーバー上に画像を保存せずに、ブラウザに表示させる)
実装手順
ソース:https://app.box.com/s/ulqkx6eg1s2iyi2ehaohy628pyxc07hs
# app.py
@app.route('/upload', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
# formからファイルデータを取得
file = request.files['file']
# bytesをbase64にエンコードするライブラリをインポート
import base64
import re
content_type = ''
# ファイル形式を取得
if 'png' in file.content_type:
content_type = 'png'
elif 'jpeg' in file.content_type:
content_type = 'jpeg'
# bytesファイルのデータをbase64にエンコードする
uploadimage_base64 = base64.b64encode(file.stream.read())
# base64形式のデータを文字列に変換する。その際に、「b'」と「'」の文字列を除去する
uploadimage_base64_string = re.sub('b\'|\'', '', str(uploadimage_base64))
# 「data:image/png;base64,xxxxx」の形式にする
filebinary = f'data:image/{content_type};base64,{uploadimage_base64_string}'
return render_template('uploaded_file.html', filebinary=filebinary)
#uploaded .html
{% extends "base.html" %}
{% block content %}
<h1>ファイルアップロード完了</h1>
<h2>{{ filename }}</h2>
<div>
<!-- base64形式のイメージを表示する -->
<img src="{{filebinary}}" alt="画像">
</div>
{% endblock %}
この記事が気に入ったらサポートをしてみませんか?