FlaskでWebアプリ開発、ファイルのアップロード

1_プログラミング

クライアントからファイルを送信してサーバーに保存できるみたいです。

実用的な雰囲気出ていますね。

Flaskチュートリアル、クイックスタートの「File Uploads」を進めていきます。進めているチュートリアルページはこちらになります。

こんな人の役に立つかも

・flaskを勉強している人

・PythonでWebアプリケーションを作りたい人

・flaskでファイルのアップロードをしたい人

スポンサーリンク

File Uploadsをプログラミング

Flaskチュートリアルのプログラムを元に、アップロードを行うプログラムを作成しました。

今回も、チュートリアルだけではよくわかりませんでした・・・

ファイルの構成

プロジェクトフォルダはこのような構成になりました。今回作成したのは、下の図の赤線のファイル、フォルダになります。

必要となるファイル、フォルダは次の通りです。

①application.py
前回のログインで利用したapplication.pyに追記していきます。

②uploads.html
ファイルをアップロードするためのフォームを記載したHTMLテンプレートです。

③finished.html
アップロードができたら表示するアップロード完了画面HTMLテンプレートです。

④uploadsフォルダ
アップロードしたファイルを保存するための階層です。

①application.py

前回の記事で試したログインのサンプルプログラムに「@app.route(‘/uploads’)」のブロックを追加しています。

from flask import Flask, url_for
from markupsafe import escape
from flask import request
from flask import render_template
app = Flask(__name__)

@app.route('/')
def index():
    return 'Index'

@app.route('/login', methods=['POST', 'GET'])
def login():
    if request.method == 'POST':
        if request.form['username'] and request.form['password']:
            return render_template('in.html',
            	username=request.form['username'],
            	password=request.form['password'])
    return render_template('login.html')

#↓今回追加したプログラム
#クライアントの命名したファイル名を利用するためのsecure_filename()
from werkzeug.utils import secure_filename

@app.route('/uploads', methods=['POST', 'GET'])
def upload_file():
    if request.method == 'POST':
        f = request.files["the_file"]
        #任意の階層をフルパスで指定(macの場合。任意のユーザー名は変更してください。)
        f.save('/Users/任意のユーザー名/Python/myproject/uploads/' + secure_filename(f.filename))
        #アップロードしてサーバーにファイルが保存されたらfinishedを表示
        return render_template('finished.html')
    else:
    	#GETでアクセスされた時、uploadsを表示
    	return render_template('uploads.html')

「localhost:5000/uploads」にアクセスすると、uploads.htmlのフォームが表示されます。「POST」メソッドでアクセス(フォームに入力して送信ボタンをおすと)すると、if条件文の中に入り、フォームで選択したファイルを任意の階層に保存します。

この時、ユーザー指定のファイル名をそのまま使うときには、セキュリティに配慮する必要があり、そのためにimportしたsecure_filenameメソッドを利用しています。

最後に、「finished.html」テンプレートを表示するようにしています。

プログラムに厚みが出てきた感じがします。

②uploads.html

一般的なHTMLによるフォームデータです。

<!doctypehtml>
<html>
  <head>
  	<meta charset="utf8"/>
  </head>
  <body>
  	<h1>アップロードフォーム</h1>
  	<form method="POST" action="/uploads" enctype="multipart/form-data">
  	  <input placeholder="お名前" name="username" type="text"/>
  	  <input placeholder="データ" name="the_file" type="file"/>
  	  <input value="送信" type="submit"/>
  	</form>
  </body>
</html>

ファイルを送信する際に、「enctype=”multipart/form-data”」とする点がポイントです。そして、ファイルをアップロードする「input」にはapplication.pyで受け取っている「the_file」という名前でデータを渡します。

③finished.html

かなり雑なHTMLですが、アップロード完了、と表示するためだけのHTMLテンプレートになります。

<html>
  <body>
    <h1>アップロード完了</h1>
  </body>
</html>

④uploadsフォルダ

application.pyで、この階層をフルパスで指定してフォームで選択したファイルをここに保存します。

フルパスじゃないやり方はよくわかっていません・・・

動作の確認と検証

Pythonの仮想環境でデバッグ用Webサーバーを立ち上げて、「localhost:5000/uploads」へとアクセスします。

Pythonの仮想環境とデバッグ用Webサーバーにつきましては、次の記事もご参考ください。

アクセスすると、アップロードフォームが出てきます。この状態が、GETでリクエストを出した状態となります。

適当なテキストファイルなどを作成して、「ファイルを選択」ボタンからアップロードしてみます。

今回、私はこの画像をアップロードしてみました。

ファイルを選択したら「送信」ボタンを押します。

 

しっかりと「finished.html」へ遷移していることがわかります。

ここで、myprojectの「uploads」フォルダを確認してみます。

uploadsフォルダに「panda.png」が保存されています。

チュートリアルには、アップロードに関するより詳しい説明ページがあるようです。パッとみた感じで、ファイルサイズの制限や、拡張しでの制限など、より実用的な部分が記載してあるようなので、こちらも少し目を通してみようかと思います。

タイトルとURLをコピーしました