2012-06-29 7 views
12

Sto usando flask e sto provando a fare qualcosa di molto semplice usando l'esercitazione quickstart, appena in esecuzione sulla mia macchina (server locale). Produco un semplice modulo di caricamento che carica con successo un file immagine. Quindi voglio passare questa immagine come variabile a template.html per la visualizzazione all'interno di una pagina. Il file template.html viene visualizzato correttamente, ma l'immagine è sempre broken link image symbol. Ho provato una serie di percorsi diversi, ma ho la sensazione che sto facendo le cose un po 'male.Come passare l'immagine caricata a template.html in 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() 

Questo è 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 %} 

Come posso passare il file immagine caricata per template.html quindi verrà visualizzato correttamente?

Grazie

risposta

15

Cosa sta succedendo adesso è che /uploads/foo.jpg restituisce il codice HTML all'interno template.html. Lì si tenta di utilizzare /uploads/foo.jpg come origine del tag img. Da nessuna parte si serve l'immagine reale.

Modifichiamo in questo modo: /show/foo.jpg restituisce la pagina HTML e /uploads/foo.jpg restituisce l'immagine. Sostituire il secondo percorso con questi due e si dovrebbe essere pronti per partire:

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

Forse questa è una domanda stupida, ma quando si send_file ogni finiscono per essere chiamato con questo Inoltre? – Uzebeckatrente

+0

@Uzebeckatrente, il tag '' nel modello punta a '/ uploads/', che viene instradato a send_file. – Miikka

+0

Ciao @Miikka Sto provando questo sul server cloud. La stessa logica non funziona per me. Mostra il percorso completo dell'immagine all'interno del tag src. Puoi per favore suggerire qualcosa ?? –

6

Dalla funzione uploaded_file, ci dirigiamo al template.html e ci saranno vengono reindirizzati <img src="{{ url_for('send_file', filename=filename) }}"> tornando abbiamo raggiunto la funzione send_file che sarà mostra il contenuto dell'HTML all'interno del modello con l'immagine caricata e memorizzata in UPLOAD_FOLDER specificato. si sta anche perdendo from werkzeug import secure_filename questo nel file di 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) 

Ora il vostro template.html sarà simile a questa ..

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