Készítsen egyszerű, de hatékony képfeltöltőt ezzel a Python-oktatóanyaggal.

A modern alkalmazások egyik legvonzóbb tulajdonsága, hogy képes befogadni a képeket. Az olyan képek, mint a képek, illusztrációk és animációk vizuális vonzerőt kölcsönöznek az alkalmazásoknak.

Bár a képek fontosak, lelassíthatják az alkalmazást, és növelhetik az adatbázis biztonsági fenyegetéseit.

A Django-ra épített alkalmazások esetén a képek feltöltése egyszerű és biztonságos. A Django speciális funkcióval rendelkezik, amely biztosítja a képek feltöltését.

Tanuljuk meg, hogyan tölthet fel képeket egy Django alkalmazásba a biztonság veszélyeztetése nélkül.

Amire szükséged van

Mielőtt elkezdené a képek feltöltését, győződjön meg arról, hogy megfelel a következő követelményeknek:

  • Telepítse a Python-t
  • Telepítse a Pip-et
  • Telepítés Pipenv (ha akarod, használhatod a venv-t is)
  • Telepítse a Django-t
  • Van egy meglévő Django-alkalmazása, amelyhez képek szükségesek

Most, hogy megvannak a szükséges függőségek, kezdjük.

1. Telepítse a párnát

instagram viewer

Djangónak van egy ImageField modelljeiben. A mező a képfeltöltéseket a fájlrendszer meghatározott helyén tárolja, nem az adatbázisban. Párna egy Python-könyvtár, amely ellenőrzi a képeket az ImageFieldben.

Telepíteni párna használja az alábbi parancsot:

pipenv install pillow

Ha venv-t használ, használja inkább ezt a parancsot

pip install pillow

2. Modell létrehozása

Hozzon létre egy ImageField hivatkozás az adatbázisban. Ezután adja hozzá a upload_to argumentum a modellben. Az argumentum egy tárolási helyet határoz meg a fájlrendszerben.

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'

A végén található metódus segít az adatok sztringekké alakításában.

Következő lépésként végezze el az új módosítások áttelepítését és véglegesítését az adatbázisban. Ezután módosítania kell a projekt beállításait.

Navigáljon a projektbeállításokhoz. címszó alatt # Statikus fájlok (CSS, JavaScript, képek), adja hozzá a média URL-jét.

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

A média URL-címek beállítása a beállításokhoz egy adott útvonalat határoz meg a feltöltött képek megjelenítéséhez. A médiafájl tárolja az alkalmazás képeit. Az útvonal így fog kinézni: 127.0.0.1:8000/media/profile/image.jpg

Frissítse a SABLONOK tömböt a projektbeállításokban. Hozzáadás django.template.context_processors.media a sablonok tömbjéhez.

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 processzorok médiabeállításai segítik a feltöltött képek betöltését az alkalmazássablonokba.

Ezután hozzá kell adnia a MEDIA_ROOT útvonalat az alkalmazás URL-jéhez. Ez segít a feltöltött képek betöltésében a fejlesztői szerverre.

Először importálja a projektbeállításokat a django.conf modul és a statikus funkció. Ezután adja hozzá a URL-minták egy statikus útvonal, amely megmutatja a feltöltött fájlok helyét.

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. Képfeltöltések tesztelése

Ezután futtassa a szervert:

python manage.py runserver

Ha nincs hiba, navigáljon a Django adminisztrációs panelre úgy, hogy adjon hozzá egy adminisztrátori útvonalat az alap URL-hez, http://127.0.0.1:8000/admin.

Az adminisztrációs panelen belül, amikor a Profil modellre kattint, egy képmező jelenik meg az alján.

Amikor feltölt egy képet, egy új mappát fog látni az alkalmazás mappájában média. Amikor megnyitja a mappát, látni fogja az adminisztrációs panelen keresztül feltöltött képet.

6. Jelenítse meg a feltöltött képet

A profilkép megjelenítéséhez frissítenie kell a profilsablont.

Hozzáad egy img címkét, és töltse fel a profil kép tulajdonság. A ImageField rendelkezik egy URL attribútummal, amely megadja a fájl abszolút URL-jét. A kép alakját és megjelenését CSS osztályok segítségével adhatja meg.

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

Futtathatja a szervert a kép betöltéséhez. Ezután ellenőrizze a sablont a böngészőben a megjelenített kép megtekintéséhez.

Hogyan töltsünk fel képeket egy Django alkalmazásban

A Django megkönnyíti a képek feltöltését az alkalmazásokba. A Django modelljein egy speciális mező található, amely feltöltés előtt hozzáadja és ellenőrzi a fájltípust.

Az ImageField abszolút elérési utat biztosít a fájlrendszerhez a képek tárolására. A képek fájlrendszerben való tárolása növeli az alkalmazás sebességét, és biztosítja, hogy az adatbázisba ne szivárogjanak be káros fájlok.