如何將上傳的圖片傳遞給Flask中的template.html

我正在使用flask，並嘗試使用快速入門教程做一些非常簡單的事情，只需在我的機器（本地服務器）上運行即可。我製作了一個簡單的上傳表單，可以成功上傳圖像文件。然後，我想將此圖像作爲變量傳遞給template.html以在頁面內顯示。 template.html文件顯示正常，但圖像始終爲broken link image symbol。我嘗試了很多不同的途徑，但我有一種感覺，我正在做的事情有點不對。如何將上傳的圖片傳遞給Flask中的template.html

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，以便正常顯示？

感謝

來源

2012-06-29 fraxel

現在發生什麼事是，/uploads/foo.jpg返回內部template.html的HTML。您嘗試使用/uploads/foo.jpg作爲img標籤的來源。無處可以爲實際圖像提供服務。

讓我們這樣修改：/show/foo.jpg返回HTML頁面，並且/uploads/foo.jpg返回圖像。這兩個取代後者的路線，你應該是好去：

@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-29 13:32:45 Miikka

也許這是一個愚蠢的問題，而是何時會由send_file每次都能得到調用此加成？ – Uzebeckatrente

@Uzebeckatrente，模板中的''標記指向'/ uploads/'，它被路由到send_file。 – Miikka

嗨@Miikka我在雲服務器上嘗試這個。同樣的邏輯對我不起作用。它顯示src標記內的完整圖像路徑。你可以請任何建議嗎？ –

從uploaded_file功能，我們前往的template.html並且會有被重定向回<img src="{{ url_for('send_file', filename=filename) }}">回來我們打的由send_file功能，將顯示模板內的HTML內容，並將圖像上傳並存儲在指定的UPLOAD_FOLDER中。你也缺少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-02 22:29:07 Transformer

如何將上傳的圖片傳遞給Flask中的template.html

回答

相關問題