Question

我正在使用flask，尝试使用快速入门教程非常简单，只需在我的机器（本地服务器）上运行即可。我生成一个简单的上传表单，成功上传图像文件。然后，我想将此图像作为变量传递给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，以便正确显示？

由于

Answer 1

现在发生的事情是/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)

Answer 2

从uploaded_file函数，我们前往template.html，然后将重定向回<img src="{{ url_for('send_file', filename=filename) }}">返回我们点击send_file函数，该函数将显示模板内的HTML内容，上传并存储图像指定了UPLOAD_FOLDER。您在py文件中也缺少from werkzeug import secure_filename

@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 %}

如何将上传的图像传递给Flask中的template.html

2 个答案: