Byg en enkel, men effektiv billeduploader med denne Python-tutorial.

En af de mest tiltalende funktioner ved en moderne applikation er dens evne til at rumme billeder. Billeder såsom billeder, illustrationer og animationer giver en visuel appel til en applikation.

Selvom billeder er vigtige, kan de gøre appen langsommere og øge sikkerhedstruslerne mod databasen.

For applikationer bygget på Django er upload af billeder nemt og sikkert. Django har en specialiseret funktion, der giver mulighed for upload af billeder.

Lad os lære, hvordan du uploader billeder til en Django-app uden at gå på kompromis med sikkerheden.

Hvad du har brug for

Før du begynder at uploade billeder, skal du sørge for, at du har følgende krav:

  • Installer Python
  • Installer Pip
  • Installere Pipenv (du kan også bruge venv hvis du ønsker det)
  • Installer Django
  • Du har en eksisterende Django-app, der har brug for billeder

Nu hvor du har de nødvendige afhængigheder, lad os begynde.

1. Installer pude

Django har en Billedfelt i sine modeller

instagram viewer
. Feltet gemmer billedoverførsler på et bestemt sted i filsystemet, ikke databasen. Pude er et Python-bibliotek, der søger efter billeder i ImageField.

At installere pude brug kommandoen nedenfor:

pipenv install pillow

Hvis du bruger venv, skal du bruge denne kommando i stedet

pip install pillow

2. Opret model

Opret en Billedfelt reference i databasen. Tilføj derefter upload_to argument i modellen. Argumentet definerer en lagerplacering i filsystemet.

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'

Metoden i slutningen hjælper med at konvertere dataene til strenge.

Derefter skal du migrere og overføre de nye ændringer til databasen. Derefter skal du redigere projektindstillingerne.

Naviger til projektindstillingen. Under overskriften # Statiske filer (CSS, JavaScript, billeder), tilføj medie-URL.

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

Tilføjelse af medie-URL'er til indstillinger definerer en specifik rute til at vise uploadede billeder. Mediefilen gemmer app-billederne. Stien vil se sådan ud: 127.0.0.1:8000/media/profile/image.jpg

Opdater Skabeloner array i projektindstillingerne. Tilføje django.template.context_processors.media til skabelonarray.

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

Processorernes medieindstilling hjælper med at indlæse de uploadede billeder i app-skabelonerne.

Dernæst skal du tilføje MEDIA_ROOT rute til app-URL'erne. Dette vil hjælpe med at indlæse de uploadede billeder til udviklingsserveren.

Først skal du importere projektindstillingerne fra django.conf modul og et statisk funktion. Tilføj derefter til urlmønstre en statisk rute, der viser de uploadede filers placering.

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. Test billeduploads

Kør derefter serveren:

python manage.py runserver

Hvis der ikke er nogen fejl, skal du navigere til Django-administrationspanelet ved at tilføje en admin-rute til basis-URL'en, http://127.0.0.1:8000/admin.

Inde i admin panelet, når du klikker på profilmodellen, vil du se et billedfelt tilføjet i bunden.

Når du uploader et billede, vil du se en ny mappe oprettet i app-mappen kaldet medier. Når du åbner mappen, vil du se det billede, du har uploadet via admin panelet.

6. Vis det uploadede billede

Du bør opdatere profilskabelonen for at vise profilbilledet.

Du tilføjer en img tag og udfyld det med profilbillede attribut. Det Billedfelt har en URL-attribut, der giver den absolutte URL til filen. Du kan angive formen og udseendet af billedet ved hjælp af CSS-klasser.

{% 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 %}

Du kan køre serveren for at indlæse billedet. Tjek derefter skabelonen i browseren for at se det viste billede.

Sådan uploades billeder i en Django-app

Django gør det nemt at uploade billeder i dine applikationer. Django har et specialiseret felt på sine modeller, der tilføjer og tjekker for filtype før upload.

ImageField giver en absolut sti til et filsystem for at gemme billederne. Lagring af billederne i et filsystem øger appens hastighed og sikrer, at databasen ikke infiltreres med skadelige filer.