Cách chuyển hình ảnh đã tải lên lên template.html trong Flask

Tôi đang sử dụng flask và cố gắng thực hiện điều gì đó rất đơn giản bằng cách sử dụng hướng dẫn nhanh, chỉ chạy trên máy của tôi (máy chủ cục bộ). Tôi tạo một biểu mẫu tải lên đơn giản tải lên thành công tệp hình ảnh. Sau đó tôi muốn chuyển hình ảnh này dưới dạng biến số cho một số template.html để hiển thị trong một trang. Tệp template.html hiển thị tốt, nhưng hình ảnh luôn là broken link image symbol. Tôi đã thử một số con đường khác nhau, nhưng tôi có cảm giác tôi đang làm những việc sai một chút.Cách chuyển hình ảnh đã tải lên lên template.html trong Flask

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()

Đây là 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 %}

Làm thế nào tôi có thể vượt qua các tập tin hình ảnh được tải lên template.html vì vậy nó sẽ hiển thị một cách chính xác?

Cảm ơn

Nguồn

2012-06-29 fraxel

Điều đang diễn ra là /uploads/foo.jpg trả về HTML bên trong template.html. Ở đó bạn cố gắng sử dụng /uploads/foo.jpg làm nguồn của thẻ img. Không nơi nào bạn phục vụ hình ảnh thực tế.

Hãy sửa đổi nó như sau: /show/foo.jpg trả về trang HTML và và /uploads/foo.jpg trả về hình ảnh. Thay thế các tuyến đường sau với hai những điều này và bạn sẽ được tốt để đi:

@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)

Nguồn

2012-06-29 13:32:45 Miikka

Có lẽ đây là một câu hỏi ngớ ngẩn nhưng khi sẽ send_file mỗi kết thúc nhận được gọi với điều này thêm vào? – Uzebeckatrente

@Uzebeckatrente, thẻ '' trong mẫu trỏ đến '/ uploads/', được định tuyến đến send_file. – Miikka

Xin chào @Miikka Tôi đang thử điều này trên máy chủ đám mây. Cùng một logic doesnot làm việc cho tôi. Nó cho thấy đường dẫn hình ảnh đầy đủ bên trong thẻ src. Bạn có thể đề nghị bất cứ điều gì ?? –

Từ chức năng uploaded_file, chúng tôi đi đến template.html và sẽ được chuyển hướng trở lại <img src="{{ url_for('send_file', filename=filename) }}"> quay trở lại, chúng tôi nhấn chức năng send_file mà sẽ hiển thị nội dung của HTML bên trong mẫu có hình ảnh được tải lên và lưu trữ trong UPLOAD_FOLDER được chỉ định. bạn cũng đang thiếu from werkzeug import secure_filename này trong file 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)

Bây giờ template.html của bạn sẽ trông như thế này ..

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

Nguồn

2013-10-02 22:29:07 Transformer

Cách chuyển hình ảnh đã tải lên lên template.html trong Flask

Trả lời

Các vấn đề liên quan