COMO RETORNA UMA IMAGEM DO FLASK_SQLALCHMY

Olá Marcelo, tudo bem com você?

Peço desculpas pela demora no retorno.

Para retornar uma imagem do Flask SQLAlchemy, primeiro você precisa certificar-se de que a imagem foi armazenada corretamente no banco de dados SQLite. Uma vez que você tenha armazenado a imagem, pode retorná-la para o usuário em uma rota diferente. Você pode criar uma rota que aceite um parâmetro id (ou qualquer outro identificador exclusivo) e, em seguida, usar o SQLAlchemy para recuperar a imagem correspondente do banco de dados.

Já para fazer o preview da imagem no momento em que o usuário seleciona o arquivo no formulário, você pode utilizar JavaScript que adicionará um escutador no evento change do input file para chamar a função previewImagem quando um arquivo é selecionado.

Segue abaixo um código completo com as características ditas acima:

from flask import Flask, render_template_string, Response, request, flash, redirect, url_for
from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)
app.secret_key = 'coloque_uma_chave_secreta_aqui'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)

class Imagens(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    imagem = db.Column(db.LargeBinary, nullable=False)

@app.route('/imagem/<int:id>')
def get_imagem(id):
    imagem = Imagens.query.filter_by(id=id).first_or_404()
    return Response(imagem.imagem, mimetype='image/jpeg')

@app.route('/cadastrar_imagem', methods=['GET', 'POST'])
def cadastrar_imagem():
    if request.method == 'POST':
        imagem = request.files['imagem'].read() # lê a imagem enviada no formulário
        nova_imagem = Imagens(imagem=imagem) # cria uma nova instância do modelo Imagens com a imagem lida
        db.session.add(nova_imagem) # adiciona a nova instância ao banco de dados
        db.session.commit() # confirma a transação
        flash("Imagem cadastrada com sucesso", "success")
        return redirect(url_for('get_imagem', id=nova_imagem.id))

    # Renderiza o template diretamente como uma string
    template = '''
    <h1>Cadastrar Imagem</h1>
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="imagem" onchange="previewImagem(event)">
        <img id="imagem-preview">
        <button type="submit">Enviar</button>
    </form>

    <script>
        function previewImagem(event) {
            const imagemPreview = document.getElementById('imagem-preview');
            imagemPreview.src = URL.createObjectURL(event.target.files[0]);
            imagemPreview.style.display = 'block';
        }
    </script>

    '''
    return render_template_string(template)

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)

Espero ter ajudado. Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!