26

私はフラスコを使用しており、クイックスタート チュートリアルを使用して非常に簡単なことをしようとしています。自分のマシン (ローカル サーバー) で実行しているだけです。画像ファイルを正常にアップロードする簡単なアップロード フォームを作成します。次に、この画像を変数として に渡しtemplate.html、ページ内に表示します。ファイルは正常に表示されtemplate.htmlますが、画像は常にbroken link image symbol. 私はさまざまな方法を試しましたが、少し間違ったことをしていると感じています。

import os
from flask import Flask, request, redirect, url_for, send_from_directory, 
                  render_template

UPLOAD_FOLDER = '/home/me/Desktop/projects/flask/uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect(url_for('uploaded_file', filename=filename))
    return '''
    <!doctype html>
    <title>Upload new File</title>
    <h1>Upload new File</h1>
    <form action="" method=post enctype=multipart/form-data>
      <p><input type=file name=file>
         <input type=submit value=Upload>
    </form>
    '''

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    filename = 'http://127.0.0.1:5000/uploads/' + filename
    return render_template('template.html', filename = filename)

if __name__ == '__main__':
    app.run()

これはtemplate.html次のとおりです。

<!doctype html>
<title>Hello from Flask</title>
{% if filename %}
  <h1>some text<img src="{{filename}}"> more text!</h1>
{% else %}
  <h1>no image for whatever reason</h1>
{% endif %}

アップロードした画像ファイルを に渡してtemplate.html正しく表示するにはどうすればよいですか?

ありがとう

4

2 に答える 2

27

現在起こっていること/uploads/foo.jpgは、template.html 内の HTML を返すことです。/uploads/foo.jpgそこでimg タグのソースとして使用しようとします。実際の画像を提供する場所はどこにもありません。

次のように変更しましょう: /show/foo.jpgHTML ページを/uploads/foo.jpg返し、画像を返します。後者のルートを次の 2 つに置き換えれば、準備完了です。

@app.route('/show/<filename>')
def uploaded_file(filename):
    filename = 'http://127.0.0.1:5000/uploads/' + filename
    return render_template('template.html', filename=filename)

@app.route('/uploads/<filename>')
def send_file(filename):
    return send_from_directory(UPLOAD_FOLDER, filename)
于 2012-06-29T13:32:45.687 に答える
12

Upload_file 関数から template.html に移動すると、リダイレクトされ<img src="{{ url_for('send_file', filename=filename) }}">て send_file 関数に戻ります。この関数は、指定された UPLOAD_FOLDER にアップロードおよび保存された画像を含むテンプレート内の HTML のコンテンツを表示します。from werkzeug import secure_filenameこれもpyファイルにありません

@app.route('/show/<filename>')
def uploaded_file(filename):
    return render_template('template.html', filename=filename)

@app.route('/uploads/<filename>')
def send_file(filename):
    return send_from_directory(UPLOAD_FOLDER, filename)

これで、template.html は次のようになります。

<!doctype html>
<title>Hello from Flask</title>
{% if filename %}
  <h1>some text <img src="{{ url_for('send_file', filename=filename) }}">more text!</h1>
{% else %}
  <h1>no image for whatever reason</h1>
{% endif %}
于 2013-10-02T22:29:07.467 に答える