Bygg en enkel men effektiv bilduppladdare med denna Python-handledning.

En av de mest tilltalande funktionerna i en modern applikation är dess förmåga att rymma bilder. Bilder som bilder, illustrationer och animationer tilltalar en applikation visuellt.

Även om bilder är viktiga kan de sakta ner appen och öka säkerhetshoten mot databasen.

För applikationer byggda på Django är det enkelt och säkert att ladda upp bilder. Django har en specialiserad funktion som gör det möjligt att ladda upp bilder.

Låt oss lära oss hur man laddar upp bilder till en Django-app utan att kompromissa med säkerheten.

Vad du behöver

Innan du börjar ladda upp bilder, se till att du har följande krav:

  • Installera Python
  • Installera Pip
  • Installera Pipenv (du kan också använda venv om du vill)
  • Installera Django
  • Du har en befintlig Django-app som behöver bilder

Nu när du har de nödvändiga beroenden låt oss börja.

1. Installera kudde

Django har en Bildfält i sina modeller. Fältet lagrar bilduppladdningar på en angiven plats i filsystemet, inte databasen. Kudde är ett Python-bibliotek som letar efter bilder i bildfältet.

instagram viewer

Att installera kudde använd kommandot nedan:

pipenv install pillow

Om du använder venv, använd detta kommando istället

pip install pillow

2. Skapa modell

Skapa en Bildfält referens i databasen. Lägg sedan till ladda upp till argument i modellen. Argumentet definierar en lagringsplats 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 slutet hjälper till att omvandla data till strängar.

Migrera sedan och överför de nya ändringarna till databasen. Sedan måste du redigera projektinställningarna.

Navigera till projektinställningen. Under rubriken # Statiska filer (CSS, JavaScript, bilder), lägg till media-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')

Att lägga till media-URL: er till inställningar definierar en specifik väg för att visa uppladdade bilder. Mediafilen lagrar appbilderna. Vägen kommer att se ut så här: 127.0.0.1:8000/media/profile/image.jpg

Uppdatera MALLAR array i projektinställningarna. Lägg till django.template.context_processors.media till mallar array.

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

Processorernas mediainställning hjälper till att ladda de uppladdade bilderna i appmallarna.

Därefter måste du lägga till MEDIA_ROOT väg till appens webbadresser. Detta hjälper till att ladda de uppladdade bilderna till framkallningsservern.

Importera först projektinställningarna från django.conf modul och en statisk funktion. Lägg sedan till urlmönster en statisk rutt som visar de uppladdade filernas plats.

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. Testa bilduppladdningar

Kör sedan servern:

python manage.py runserver

Om det inte finns några fel, navigera till Djangos adminpanel genom att lägga till en administratörsrutt till bas-URL: http://127.0.0.1:8000/admin.

Inuti adminpanelen, när du klickar på profilmodellen, ser du ett bildfält lagt till längst ner.

När du laddar upp en bild kommer du att se en ny mapp skapad i appmappen som heter media. När du öppnar mappen ser du bilden du laddade upp via adminpanelen.

6. Visa den uppladdade bilden

Du bör uppdatera profilmallen för att visa profilbilden.

Du kommer att lägga till en img taggen och fyll den med profilbild attribut. De Bildfält har ett URL-attribut som tillhandahåller den absoluta URL: en till filen. Du kan ange bildens form och utseende med 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öra servern för att ladda bilden. Kontrollera sedan mallen i webbläsaren för att se bilden som visas.

Hur man laddar upp bilder i en Django-app

Django gör det enkelt att ladda upp bilder i dina applikationer. Django har ett specialiserat fält på sina modeller som lägger till och kontrollerar filtyp före uppladdning.

Bildfältet ger en absolut sökväg till ett filsystem för att lagra bilderna. Att lagra bilderna i ett filsystem ökar appens hastighet och säkerställer att databasen inte infiltreras med skadliga filer.