Bygg en enkel, men effektiv bildeopplasting med denne Python-opplæringen.

En av de mest tiltalende funksjonene til en moderne applikasjon er dens evne til å romme bilder. Bilder som bilder, illustrasjoner og animasjoner gir visuell appell til en applikasjon.

Selv om bilder er viktige, kan de bremse appen og øke sikkerhetstruslene mot databasen.

For applikasjoner bygget på Django er det enkelt og sikkert å laste opp bilder. Django har en spesialfunksjon som sørger for opplasting av bilder.

La oss lære hvordan du laster opp bilder til en Django-app uten at det går på bekostning av sikkerheten.

Hva trenger du

Før du begynner å laste opp bilder, sørg for at du har følgende krav:

  • Installer Python
  • Installer Pip
  • Installere Pipenv (du kan også bruke venv om du ønsker det)
  • Installer Django
  • Du har en eksisterende Django-app som trenger bilder

Nå som du har de nødvendige avhengighetene, la oss begynne.

1. Installer pute

Django har en Bildefelt i sine modeller. Feltet lagrer bildeopplastinger på et spesifisert sted i filsystemet, ikke databasen.

instagram viewer
Pute er et Python-bibliotek som ser etter bilder i ImageField.

Å installere pute bruk kommandoen nedenfor:

pipenv install pillow

Hvis du bruker venv, bruk denne kommandoen i stedet

pip install pillow

2. Lag modell

Opprett en Bildefelt referanse i databasen. Deretter legger du til last opp_til argument i modellen. Argumentet definerer en lagringsplass 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 på slutten hjelper til med å konvertere dataene til strenger.

Deretter migrerer og forplikter de nye endringene til databasen. Deretter må du redigere prosjektinnstillingene.

Naviger til prosjektinnstillingen. Under overskriften # Statiske filer (CSS, JavaScript, bilder), legg til 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')

Å legge til medie-URL-er til innstillinger definerer en bestemt rute for å vise opplastede bilder. Mediefilen lagrer appbildene. Banen vil se slik ut: 127.0.0.1:8000/media/profile/image.jpg

Oppdater MALER array i prosjektinnstillingene. Legg til django.template.context_processors.media til maler 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'
 ],
 },
 },
]

Prosessorens medieinnstilling hjelper til med å laste de opplastede bildene i appmalene.

Deretter må du legge til MEDIA_ROOT rute til app-URLene. Dette vil bidra til å laste de opplastede bildene til utviklingsserveren.

Først importerer du prosjektinnstillingene fra django.conf modul og en statisk funksjon. Deretter legger du til urlmønstre en statisk rute som viser plasseringen til de opplastede filene.

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 bildeopplastinger

Deretter kjører du serveren:

python manage.py runserver

Hvis det ikke er noen feil, naviger til Django-administrasjonspanelet ved å legge til en admin-rute til basis-URLen, http://127.0.0.1:8000/admin.

Inne i administrasjonspanelet, når du klikker på profilmodellen, vil du se et bildefelt lagt til nederst.

Når du laster opp et bilde, vil du se en ny mappe opprettet i appmappen som heter media. Når du åpner mappen, vil du se bildet du lastet opp via administrasjonspanelet.

6. Vis det opplastede bildet

Du bør oppdatere profilmalen for å vise profilbildet.

Du vil legge til en img taggen og fyll den med profilbilde Egenskap. De Bildefelt har et URL-attributt som gir den absolutte URL-en til filen. Du kan spesifisere formen og utseendet til bildet ved å bruke 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 kjøre serveren for å laste inn bildet. Sjekk deretter malen i nettleseren for å se bildet som vises.

Hvordan laste opp bilder i en Django-app

Django gjør det enkelt å laste opp bilder i applikasjonene dine. Django har et spesialfelt på sine modeller som legger til og sjekker for filtype før opplasting.

ImageField gir en absolutt bane til et filsystem for å lagre bildene. Lagring av bildene i et filsystem øker appens hastighet og sikrer at databasen ikke infiltreres med skadelige filer.