Javascriptのファイルのアップロードが動作しない場合の解決方法

前提・実現したいこと

”Pythonではじめる Webサービス＆スマホアプリ”という書籍でpythonとJavascriptの勉強をしております。その中で、ファイルのアップロードを利用するところで動作しないため、お教えいただきたく投稿しました。

実現したいことは対象のjpegファイルを選択し、アップロードするとjpeg画像が表示されるようにしたいです。

発生している問題・エラーメッセージ

エラーメッセージは表示されませんが、コマンドラインで、”XXX.py”ファイルを実行し、対象アドレスをWebブラウザで動作させた際にトップ画面,画像選択ウィンドウ、アップロードまでは表示されるのですが、アップロードボタンを押下すると、画像が表示されず元のトップ画面”ファイル未選択”に戻ってしまいます。

該当のソースコード

python
1from flask import Flask, request, redirect
2from datetime import datetime
3import os
4
5# 保存先のディレクトリとURLの指定 ---(*1)
6IMAGES_DIR = './static/images'
7IMAGES_URL = '/static/images'
8app = Flask(__name__)
9
10@app.route('/')
11def index_page():
12    # アップローフォーム ---(*2)
13    return """
14    <html><body><h1>アップロード</h1>
15    <form action="/upload"
16        method="POST"
17        enctype="mulitpart/form-data">
18        <input type="file" name="upfile">
19        <input type="submit" value="アップロード">
20    </form>
21    </body></html>
22    """
23
24@app.route('/upload', methods=['POST'])
25def upload():
26    # アップされていなければトップへ飛ばす ---(*3)
27    if not ('upfile' in request.files):
28        return redirect('/')
29    # アップしたファイルのオブジェクトを得る ---(*4)
30    temp_file = request.files['upfile']
31    # JPEGファイル以外は却下する ---(*5)
32    if temp_file.filename == '':
33        return redirect('/')
34    if not is_jpegfile(temp_file.stream):
35        return '<h1>JPEG以外アップできません</h1>'
36    # 保存先のファイル名を決める ---(*6)
37    time_s = datetime.now().strftime('%Y%m%d%H%M%S')
38    fname = time_s + '.jpeg'
39    # 一時ファイルを保存先ディレクトリへ保存 ---(*7)
40    temp_file.save(IMAGES_DIR + '/' + fname)
41    # 画像の表示ページへ飛ぶ
42    return redirect('/photo/' + fname)
43
44@app.route('/photo/<fname>')
45def photo_page(fname):
46    # 画像ファイルがあるか確認する ---(*8)
47    if fname is None: return redirect('/')
48    image_path = IMAGES_DIR + '/' + fname
49    image_url = IMAGES_URL + '/' + fname
50    if not os.path.exists(image_path):
51        return '<h1>画像がありません</h1>'
52    # 画像を表示するHTMLを出力する ---(*9)
53    return """
54    <h1>画像がアップロードされています</h1>
55    <p>URL: {0}<br>
56file: {1}</p>
57    <img src="{0}" width="400">
58    """.format(image_url, image_path)
59
60# JPEGファイルかどうかを確認する ---(*10)
61def is_jpegfile(fp):
62    byte = fp.read(2) # 先頭２バイトを読む
63    fp.seek(0) #　ポインタを先頭に戻す
64    return byte[:2] == b'\xFF\xD8'
65
66if __name__ == '__main__':
67    app.run(host='0.0.0.0')
68

試したこと

”.jpeg”ファイルだけではなく、エラーが表示されるはずの".png"ファイルをアップロードしてもエラーが表示されるトップ画面（（画像を選択してください）の画面に戻ります。

補足情報（FW/ツールのバージョンなど）

MacbookAir(Early 2015)
OS:10.15.5 Catalina

WebBrowser:
Google Chrome:83.0.4103.61
Safari:13.1.1 (15609.2.9.1.2)

Atom 1.48.0 x64

行動規範の内容に同意します

回答1件

ベストアンサー

実行してみました。

ファイルを選択(png画像)して、アップロードボタンを押すと、以下のreturn redirect('/')が実行されます。
request.filesは空です。(ImmutableMultiDict([]))
request.formは値が入っていました(ImmutableMultiDict([('upfile', 'ファイル名.png')]))

なので、判定を変更して試してみてください。

@app.route('/upload', methods=['POST'])
def upload():
    # アップされていなければトップへ飛ばす ---(*3)
    if not ('upfile' in request.files):
        return redirect('/')

なお、prinfデバッグくらいはした方がいいです。
printをいちいち書くのが面倒ならIDEを使うのがおすすめです。
PyCharmのCommunityなら無料で使えますので、おすすめです。

追記 2020/06/22 16:36

returnにhtmlを直接書くと、request.filesに値が入らないようです。
対策として、htmlを外出しにしてください。

例えば以下のような感じにすると、期待通りに動くと思います。

rootにtemplatesフォルダを作成してください。
templatesフォルダにindex.htmlを追加してください。

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>テスト</title>
7</head>
8<body>
9    <h1>アップロード</h1>
10    <form action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
11        <input type="file" name="upfile">
12        <input type="submit" value="アップロード">
13
14    </form>
15</body>
16</html>

app.route('/')でHTMLを直接出力しているところを、htmlを参照するように変更してください。

python
1# app.py
2from flask import render_template # render_templateを追加してください。
3
4
5@app.route('/')
6def index_page():
7    return render_template('index.html')
8    # アップローフォーム ---(*2)
9    # return """
10    # <html><body><h1>アップロード</h1>
11    # <form action="/upload"
12    #     method="POST"
13    #     enctype="mulitpart/form-data">
14    #     <input type="file" name="upfile">
15    #     <input type="submit" value="アップロード">
16    # </form>
17    # </body></html>
18    # """

コード先頭のコメントは適宜削除してください。(HTMLの先頭にコメントは入れないでください)

投稿2020/06/19 07:09

編集2020/06/22 07:43

FiroProchainezo

総合スコア2401

kenta0228

2020/06/19 09:10

回答いただきありがとうございます。 PyCharm試してみます。printをいれていないのは私がプログラム初心者でどこにどのようにいれていけばいいのかがわかっていないからになります。本に書かれているとおり、意味を追いながら実行しているレベルになります。そのため、今回教えいただいた判定を変えてみたら？について記載いただいているコードは現状のコードですよね？可能であれば変更後のコードをお教えいただけると助かります。私が見比べて現状のコードかと思っていますが、もし変更後のコードを記載いただいているのであれば申し訳ありません。

kenta0228

2020/06/22 09:56

追加で情報いただきありがとうございます。お教えいただいたように修正してみましたが期待どうりの動作をしませんでした。。。ただ、アップロード画面で、ファイルを選択後、”アップロード”ボタンを押下すると、選択していたファイル名は初期化されなくなりました。もう一歩な気がしますのでもう少し調べてみます。

kenta0228

2020/06/22 10:00

正常に動きました！！下記の追加ができておらず動作していませんでした。ありがとうございます。ちょっとづつ慣れてエラー箇所を追って行けるようになりたいと思います。 from flask import render_template # render_templateを追加してください。

行動規範の内容に同意します