第9章 アップロード

1　app.py（表示）

画像をアップロードできるようにしてみましょう。まず、app.py に /uploadの画面を表示する関数 upload_get を作成し、upload.htmlを表示します。

@app.get('/upload')
def upload_get():
    return render_template("upload.html")

2　upload.html

次にupload.htmlに投稿フォームを作成します。送信先は /upload とします。このとき、enctypeを指定しないとアップロードできません。

form内の部品はファイルアップロード（input type="file"）と本文のテキストエリア（name=mes）のみです。ただ、その下にアップロードした画像をプレビュー表示するためのimgタグを追加します。

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="upfile" id="imagebtn"><br>
    <div><img id="preview" src="" alt="画像プレビュー"></div>
    <textarea name="mes"></textarea><br>
    <input type="submit" value="アップロード">
</form>

<script src="/static/preview.js"></script>

最後にJavaScriptで画像を指定したときにプレビュー画面にプレビューを出すようにしています。

3　style.css

staticフォルダにあるstyle.cssにスタイルを設定します。 画像プレビューは初期状態では非表示にします。400pxの幅で表示します。

#preview {
    display: none; 
    max-width: 400px;
    margin: 1em;
    border: 1px solid #ccc;
}

本文の入力エリアは30文字×6行にします。

textarea{
    width: 30em;
    height:6em;
    display: block;
}

4　app.py（アップロード処理）

次にapp.py に投稿処理を行う uppload_post関数を作成します。

@app.post('/upload')
def upload_post():
    # アップロードファイルの保存
    file = request.files['upfile']
    fname = str(uuid.uuid4()) + ".jpg"
    file.save(os.path.dirname(__file__) + '/static/' + fname)

    # データベース保存
    t = Toukou(
        uid = session['uid'],
        image = fname,
        mes = request.form['mes'],
    )
    db.session.add(t)
    db.session.commit()

    return redirect('/')

アップロードしたファイルはrequest.files['upfile']で取得します。これを file.save(パス) で保存します。

ファイル名はuuidという仕組みでランダムな名前を生成します。これに拡張子.jpgを付けて、このapp.pyファイル配下のstaticフォルダに保存します。

この情報をデータベースに保存し、トップページにリダイレクトします。 ユーザIDはセッションから取得します。 実際にログイン、投稿して確認します。