Em muitos aplicativos web, é comum permitir que os usuários carreguem fotos de perfil. No entanto, armazenar essas fotos em um servidor pode consumir muito espaço de armazenamento e pode ser lento para os usuários carregarem. É por isso que muitos desenvolvedores optam por fazer o upload dessas fotos diretamente para a nuvem.
Neste post, vou explicar como você pode usar o Cloudinary para fazer o upload de fotos de perfil do usuário do Flask diretamente para a nuvem. Você também aprenderá como salvar a URL da imagem do Cloudinary em uma coluna chamada "foto de perfil" na tabela do usuário.
Passo 1: Configurar o Cloudinary
A primeira coisa que você precisa fazer é se inscrever no Cloudinary e configurá-lo para o seu aplicativo. Depois de se inscrever, você receberá um nome de usuário, uma chave de API e uma chave secreta que você usará para autenticar suas solicitações de upload.
Mas calma, faremos isso passo a passo para que você entenda!
Primeiro, como supracitado criaremos a nossa conta no site da Cloudinary clicando aqui
Agora é com você! Crie sua conta conforme a sua necessidade. Eu, pelo menos, usei o meu GitHub para tal e achei que foi uma decisão sábia, uma vez que economizei tempo! E tempo é dinheiro emmm
Feita a sua conta, deixe a primeira tela lá! Ela é importante, mas nós faremos outro processo aqui: a instalação do Cloudinary no seu aplicativo Python!
Para instalar a biblioteca Python do Cloudinary, você pode usar o seguinte comando no terminal do seu aplciativo (Lembre-se de estar no mesmo venv do seu aplicativo!):
pip install cloudinary
Agora que você realizou os processos acima, criaremos um arquivo na raiz do seu projeto Flask chamado config.py
. Nele, colocaremos exatamente isso:
import cloudinary
import cloudinary.uploader
import cloudinary.api
cloudinary.config(
cloud_name = "you_cloud_name",
api_key = "you_api_key",
api_secret = "you_api_secret"
)
Onde estiver you_*
, você substituirá pelos dados que obteve na criação da sua conta no Cloudinary. Esses dados estão exatamente como no print abaixo. E é claro que os meus você não irá ver haha!
Agora falta bem pouquinho para você integrar de vez a sua nuvem do Cloudinary ao seu aplicativo Flask! No arquivo onde estão suas rotas, você fará as seguintes importações:
import cloudinary
import config
Pronto, o seu aplicativo está totalmente integrado! Agora é só você fazer o upload das fotos dos seus usuários para a nuvem! E fazer isso é extremamente simples! Supondo que você já tenha uma coluna no seu banco de dados assim:
foto_perfil = database.Column(database.String(50), nullable=False)
Na sua rota em que o usuário modifica a foto dele, você deve fazer algo parecido com:
# upa a foto para o cloudinary
response = cloudinary.uploader.upload(form.foto_perfil.data)
# muda a coluna foto_perfil do usuario
usuario.foto_perfil = response['public_id']
Sim, isso mesmo! Dessa forma, o Cloudinary irá definir um nome para a imagem (sem repetir algum já existente) e você irá integrar esse nome na coluna foto_perfil
do usuário.
E para chamar essa imagem é algo extremamente simples. No HTML, basta você fazer algo como:
<img src="{{ 'https://res.cloudinary.com/dsfomdqni/image/upload/' ~ usuario.foto_perfil }}">
OBSERVAÇÃO
Lembrando que usei algumas variáveis aqui que podem estar diferentes para o seu projeto.
usuario
efoto_perfil
podem estar diferente para você! Cabe a você a transformação dessas variáveis de acordo com o seu projeto! Eu estou aqui para ajudar e contribuir, caso você ainda tenha dificuldades para essa integração, basta comentar abaixo que eu irei te ajudar
Bônus
- Eu suponho que você queira ter uma foto como
default
no seu sistema!Para aqueles usuarios chatos que não trocam a foto de perfilPara usuários que não usam foto de perfil! Faça upload de uma foto padrão para o Cloudinary e a nomeie comodefault
. E deixe para que toda vez que um usuário for criado seja dado um valor a coluna foto_perfil chamadodefault
. A foto que você pode usar como default pode ser essa abaixo!
Se você usa o FlaskSQL Alchemy basta ter no seu arquivo de models
algo como:
foto_perfil = database.Column(database.String(50), nullable=False, default="default.png")
Top comments (0)