Um guia para upload de imagens com um aplicativo Django

Um dos recursos mais atraentes de um aplicativo moderno é sua capacidade de acomodar imagens. Imagens como fotos, ilustrações e animações trazem apelo visual a um aplicativo.

Embora as imagens sejam importantes, elas podem desacelerar o aplicativo e aumentar as ameaças à segurança do banco de dados.

Para aplicativos construídos em Django, o upload de imagens é fácil e seguro. O Django possui um recurso especializado que fornece uploads de imagens.

Vamos aprender como fazer upload de imagens para um aplicativo Django sem comprometer a segurança.

O que você precisa

Antes de começar a enviar imagens, certifique-se de ter os seguintes requisitos:

• Instalar Python
• Instalar Pip
• Instalar Pipenv (você também pode usar venv se desejar)
• Instalar o Django
• Você tem um aplicativo Django existente que precisa de imagens

Agora que você tem as dependências necessárias, vamos começar.

1. Instalar travesseiro

Django tem um ImageField em seus modelos

. O campo armazena uploads de imagem em um local especificado no sistema de arquivos, não no banco de dados. Travesseiro é uma biblioteca Python que verifica imagens no ImageField.

Para instalar travesseiro use o comando abaixo:

pipenv install pillow

Se você estiver usando o venv, use este comando

pip install pillow

2. Criar modelo

Criar um ImageField referência no banco de dados. Em seguida, adicione o enviar para argumento no modelo. O argumento define um local de armazenamento no sistema de arquivos.

classProfile(models.Model):
 name = models.CharField(max_length=80, blank=True)
 bio = models.TextField(max_length=254, blank=True)
 profile_picture = models.ImageField(upload_to='photos/')

def__str__(self):
returnf'{self.user.username} profile'

O método no final ajuda a converter os dados em strings.

Em seguida, migre e confirme as novas alterações no banco de dados. Então, você precisa editar as configurações do projeto.

Navegue até a configuração do projeto. Sob o título # Arquivos estáticos (CSS, JavaScript, Imagens), adicione o URL da mídia.

# https://docs.djangoproject.com/en/4.0/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
 
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
 os.path.join(BASE_DIR, 'static'),
)
 
# STATICFILES_STORAGE = 
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Adicionar URLs de mídia às configurações define uma rota específica para exibir as imagens carregadas. O arquivo de mídia armazena as imagens do aplicativo. O caminho ficará assim: 127.0.0.1:8000/media/profile/image.jpg

Atualize o MODELOS array nas configurações do projeto. Adicionar django.template.context_processors.media à matriz de modelos.

TEMPLATES = [
 {
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.media'
 ],
 },
 },
]

A configuração de mídia dos processadores ajuda a carregar as imagens carregadas nos modelos de aplicativos.

Em seguida, você precisa adicionar o MEDIA_ROOT rota para os URLs do aplicativo. Isso ajudará a carregar as imagens carregadas no servidor de desenvolvimento.

Primeiro, importe as configurações do projeto do django.conf módulo e um função estática. Em seguida, adicione ao urlpadrões uma rota estática mostrando a localização dos arquivos carregados.

from django.urls import path
from. import views
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 
urlpatterns = [
 path('', views.index, name = 'index'),
 path('profile', views.profile, name='profile'),
]
 
if settings.DEBUG:
 urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
 urlpatterns += staticfiles_urlpatterns()

5. Envios de imagem de teste

Em seguida, execute o servidor:

python manage.py runserver

Se não houver erros, navegue até o painel de administração do Django adicionando uma rota de administração à URL base, http://127.0.0.1:8000/admin.

Dentro do painel de administração, ao clicar no modelo Perfil, você verá um campo de imagem adicionado na parte inferior.

Ao carregar uma imagem, você verá uma nova pasta criada na pasta do aplicativo chamada meios de comunicação. Ao abrir a pasta, você verá a imagem que carregou por meio do painel de administração.

6. Exibir a imagem enviada

Você deve atualizar o modelo de perfil para exibir a imagem do perfil.

Você vai adicionar um img tag e preenchê-lo com o Foto do perfil atributo. O ImageField tem um atributo de URL que fornece o URL absoluto para o arquivo. Você pode especificar a forma e a aparência da imagem usando classes CSS.

{% extends "base.html" %}
{% load static %}

{% block content %}
<divclass="card mb-3 bg-whitesmoke"style="max-width: fit content;">
<divclass="row g-0">
<divclass="col-md-4">
<imgsrc="{{user.profile.profile_picture.url}}"width="100px"alt="profile pic"class="mx-auto d-block rounded-circle" />
div>
div>
div>
{% endblock %}

Você pode executar o servidor para carregar a imagem. Em seguida, verifique o modelo no navegador para ver a imagem exibida.

Como fazer upload de imagens em um aplicativo Django

O Django facilita o upload de imagens em seus aplicativos. O Django possui um campo especializado em seus modelos que adiciona e verifica o tipo de arquivo antes do upload.

O ImageField fornece um caminho absoluto para um sistema de arquivos para armazenar as imagens. Armazenar as imagens em um sistema de arquivos aumenta a velocidade do aplicativo e garante que o banco de dados não seja invadido por arquivos nocivos.