Q&A前提・実現したいこと
python3.7.4 flask1.1.1 werkzeug0.16.0 を使用してブラウザからアップロードした画像を表示するシステムを作っています。
@app.route('/upload')だと結果ページにアップロードした画像が正しく
表示されますが、@app.route('/upload/')のように末尾にスラッシュを加えると
画像が表示されなくなります。
末尾のスラッシュを記載しても正しく画像が表示されるようにしたいです。
どなたか、ご存知の方、ご回答頂けると幸いです。
発生している問題・エラーメッセージ
【正常時】 127.0.0.1 - - [30/Sep/2019 13:06:07] "GET /static/hoge.jpg HTTP/1.1" 200 - 【エラー時】 127.0.0.1 - - [30/Sep/2019 14:45:24] "GET /upload/static/hoge.jpg HTTP/1.1" 404 -
該当のソースコード
###upload.html
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <h1>画像をアップロード</h1> 8 <form method="POST" action="/upload" enctype="multipart/form-data"> 9 <input placeholder="名前" name="name" type="text"/> 10 <input name="image" type="file"/> 11 <input value="送信" type="submit"/> 12 </form> 13 </body> 14</html>
###result.html
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <h1>アップロードされた画像</h1> 8 <h2>{{name}}</h2> 9 <img src="static/hoge.jpg" style="max-width: 320px"> 10 </body> 11</html>
###error.html
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <h1>不正なリクエストです</h1> 8 </body> 9</html>
###app.py
Python
1from flask import Flask, request, render_template 2from werkzeug.utils import secure_filename 3 4app = Flask(__name__) 5 6@app.route('/upload/', methods=['GET']) 7def render_upload_form(): 8 return render_template('upload.html') 9 10@app.route('/upload/',methods=['POST']) 11def upload_file(): 12 if request.form['name'] and request.files['image']: 13 f = request.files['image'] 14 f.save('static/hoge.jpg') 15 return render_template('result.html',name=request.form['name']) 16 else: 17 return render_template('error.html')
試したこと
@app.route('/upload/')の末尾の/を削除したところ、正しく画像が表示されました。
補足情報（FW/ツールのバージョンなど）
Windows10 VScode を使用して開発しております。
フォルダ構成は以下の通りです。
/
┣ app.py
┃
┣ templates/
┃ ┣ upload.html
┃ ┣ result.html
┃ ┗ error.html
┃
┗ static/
・ ┗ hoge.jpg
回答2件
0
<form method="POST" action="/upload" enctype="multipart/form-data">
↓
<form method="POST" action="/upload/" enctype="multipart/form-data">
では
すみません。
https://flask.palletsprojects.com/en/1.1.x/api/#url-route-registrations
の
If a rule ends with a slash and is requested without a slash by the user, the user is automatically redirected to the same page with a trailing slash attached.
が効いていないという主旨の質問でしたら、この回答は不適切ですね。
追記
@app.route('/upload',methods=['POST'])
と書いて/uploadにアクセスすると表示された時のURLは/uploadになります。
@app.route('/upload/',methods=['POST'])
と書いて/uploadにアクセスしても、/uploadというURLに該当する関数は登録されていません。
ですが/を追加すると合致する関数が登録されているなら、HTTPステータスコード308を返し、/upload/にリダイレクトします。
ブラウザは308を受け取って、改めて/upload/にアクセスします。それで処理が行われるので、ブラウザで表示された時そのURLは/upload/になってます。
result.htmlには
<img src="static/hoge.jpg" (略)
と書いてあるので、
前者の場合ブラウザはイメージとして/static/hoge.jpgにアクセスします。
後者の場合ブラウザはイメージとして/upload/static/hoge.jpgにアクセスします。（ページのURLが/upload/ですから）
投稿2019/09/30 06:54
編集2019/09/30 09:42
総合スコア11231
0
自己解決
解決しました。
result.html の↓の部分を
html
1<img src="static/hoge.jpg" style="max-width: 320px">
↓のように しっかりと相対パスで指定するように書き換えたところ
html
1<img src="../static/hoge.jpg" style="max-width: 320px">
表示されるようになりました。
どうやら@app.routeにバックスラッシュが無い時は、「static/hoge.jpg」の様な指定でもファイルを見つけてくれるようですが、バックスラッシュが有る時は、app.pyの位置から相対パスをしっかり記載しないとダメなようです。
python
1@app.route(/upload) → result.htmlに記載されたパス 2 [static/hoge.jpg][../static/hoge.jpg]どちらでも表示される。 3 4@app.route(/upload/)→ result.htmlに記載されたパス 5 [../static/hoge.jpg]と記載しないと表示されなかった。 6
回答して下さったquiqui様、ありがとうございました。
お騒がせ致しました。
投稿2019/09/30 09:13
総合スコア4
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/30 07:41
2019/09/30 09:56