Una guida al caricamento di immagini con un'app Django

Una delle caratteristiche più interessanti di un'applicazione moderna è la sua capacità di accogliere le immagini. Immagini come immagini, illustrazioni e animazioni conferiscono un fascino visivo a un'applicazione.

Sebbene le immagini siano importanti, possono rallentare l'app e aumentare le minacce alla sicurezza del database.

Per le applicazioni basate su Django, il caricamento delle immagini è facile e sicuro. Django ha una funzione specializzata che prevede il caricamento di immagini.

Impariamo come caricare immagini su un'app Django senza compromettere la sicurezza.

Quello che ti serve

Prima di iniziare a caricare le immagini, assicurati di avere i seguenti requisiti:

• Installa Python
• Installa Pips
• Installare Pipenv (puoi anche usare venv se lo desideri)
• Installa Django
• Hai un'app Django esistente che necessita di immagini

Ora che hai le dipendenze necessarie, iniziamo.

1. Installa il cuscino

Django ha un

Campo immagine nei suoi modelli. Il campo memorizza i caricamenti di immagini in una posizione specificata nel file system, non nel database. Cuscino è una libreria Python che verifica la presenza di immagini in ImageField.

Installare cuscino usa il comando qui sotto:

pipenv install pillow

Se stai usando venv, usa invece questo comando

pip install pillow

2. Crea modello

Creare un Campo immagine riferimento nella banca dati. Quindi, aggiungi il upload_to argomento nel modello. L'argomento definisce una posizione di archiviazione nel file system.

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'

Il metodo alla fine aiuta a convertire i dati in stringhe.

Successivamente, esegui la migrazione e conferma le nuove modifiche al database. Quindi, è necessario modificare le impostazioni del progetto.

Passare all'impostazione del progetto. Sotto il titolo # File statici (CSS, JavaScript, immagini), aggiungi l'URL multimediale.

# 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')

L'aggiunta di URL multimediali alle impostazioni definisce un percorso specifico per visualizzare le immagini caricate. Il file multimediale memorizza le immagini dell'app. Il percorso sarà simile a questo: 127.0.0.1:8000/media/profilo/immagine.jpg

Aggiorna il MODELLI array nelle impostazioni del progetto. Aggiungere django.template.context_processors.media all'array di modelli.

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'
 ],
 },
 },
]

L'impostazione multimediale dei processori aiuta a caricare le immagini caricate nei modelli di app.

Successivamente, è necessario aggiungere il file MEDIA_ROOT indirizzare agli URL dell'app. Questo aiuterà a caricare le immagini caricate sul server di sviluppo.

Innanzitutto, importa le impostazioni del progetto dal file django.conf modulo e a funzione statica. Quindi, aggiungi al modelli di URL un percorso statico che mostra la posizione dei file caricati.

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. Caricamenti di immagini di prova

Quindi, esegui il server:

python manage.py runserver

Se non ci sono errori, vai al pannello di amministrazione di Django aggiungendo un percorso di amministrazione all'URL di base, http://127.0.0.1:8000/admin.

All'interno del pannello di amministrazione, quando fai clic sul modello Profilo, vedrai un campo immagine aggiunto in basso.

Quando carichi un'immagine, vedrai una nuova cartella creata nella cartella dell'app chiamata media. Quando apri la cartella, vedrai l'immagine che hai caricato tramite il pannello di amministrazione.

6. Visualizza l'immagine caricata

È necessario aggiornare il modello del profilo per visualizzare l'immagine del profilo.

Aggiungerai un imm tagga e popolalo con il file immagine del profilo attributo. IL Campo immagine ha un attributo URL che fornisce l'URL assoluto del file. È possibile specificare la forma e l'aspetto dell'immagine utilizzando le classi 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 %}

È possibile eseguire il server per caricare l'immagine. Quindi controlla il modello sul browser per vedere l'immagine visualizzata.

Come caricare immagini in un'app Django

Django semplifica il caricamento di immagini nelle tue applicazioni. Django ha un campo specializzato sui suoi modelli che aggiunge e controlla il tipo di file prima del caricamento.

ImageField fornisce un percorso assoluto a un file system per archiviare le immagini. L'archiviazione delle immagini in un file system aumenta la velocità dell'app e garantisce che il database non venga infiltrato da file dannosi.