Erstellen Sie mit diesem Python-Tutorial einen einfachen, aber effektiven Bild-Uploader.

Eines der attraktivsten Merkmale einer modernen Anwendung ist ihre Fähigkeit, Bilder aufzunehmen. Bilder wie Bilder, Illustrationen und Animationen verleihen einer Anwendung einen visuellen Reiz.

Obwohl Bilder wichtig sind, können sie die App verlangsamen und die Sicherheitsbedrohung für die Datenbank erhöhen.

Für auf Django basierende Anwendungen ist das Hochladen von Bildern einfach und sicher. Django verfügt über eine spezielle Funktion, die das Hochladen von Bildern ermöglicht.

Erfahren Sie, wie Sie Bilder in eine Django-App hochladen, ohne die Sicherheit zu beeinträchtigen.

Was du brauchst

Bevor Sie mit dem Hochladen von Bildern beginnen, stellen Sie sicher, dass Sie die folgenden Anforderungen erfüllen:

  • Installieren Sie Python
  • Installieren Sie Pip
  • Installieren Pipenv (Sie können auch venv verwenden, wenn Sie möchten)
  • Installieren Sie Django
  • Sie haben eine bestehende Django-App, die Bilder benötigt

Nachdem Sie nun über die erforderlichen Abhängigkeiten verfügen, können wir beginnen.

instagram viewer

1. Kissen installieren

Django hat eine ImageField in seinen Modellen. Das Feld speichert Bild-Uploads an einem angegebenen Ort im Dateisystem, nicht in der Datenbank. Kopfkissen ist eine Python-Bibliothek, die nach Bildern im ImageField sucht.

Installieren Kopfkissen Verwenden Sie den folgenden Befehl:

pipenv install pillow

Wenn Sie venv verwenden, verwenden Sie stattdessen diesen Befehl

pip install pillow

2. Modell erstellen

Erstelle ein ImageField Referenz in der Datenbank. Fügen Sie dann die hinzu etwas hochladen auf Argument im Modell. Das Argument definiert einen Speicherort im Dateisystem.

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'

Die Methode am Ende hilft dabei, die Daten in Strings umzuwandeln.

Als nächstes migrieren Sie die neuen Änderungen und übernehmen sie in die Datenbank. Anschließend müssen Sie die Projekteinstellungen bearbeiten.

Navigieren Sie zur Projekteinstellung. Unter der Überschrift # Statische Dateien (CSS, JavaScript, Bilder), fügen Sie die Medien-URL hinzu.

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

Durch das Hinzufügen von Medien-URLs zu den Einstellungen wird eine bestimmte Route zur Anzeige hochgeladener Bilder definiert. Die Mediendatei speichert die App-Bilder. Der Pfad wird so aussehen: 127.0.0.1:8000/media/profile/image.jpg

Aktualisieren Sie die VORLAGEN Array in den Projekteinstellungen. Hinzufügen django.template.context_processors.media zum Vorlagen-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'
],
},
},
]

Die Medieneinstellung der Prozessoren hilft dabei, die hochgeladenen Bilder in die App-Vorlagen zu laden.

Als nächstes müssen Sie das hinzufügen MEDIA_ROOT Route zu den App-URLs. Dies hilft beim Laden der hochgeladenen Bilder auf den Entwicklungsserver.

Importieren Sie zunächst die Projekteinstellungen aus django.conf Modul und a statische Funktion. Dann fügen Sie hinzu URL-Muster eine statische Route, die den Speicherort der hochgeladenen Dateien anzeigt.

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. Testen Sie Bild-Uploads

Als nächstes führen Sie den Server aus:

python manage.py runserver

Wenn keine Fehler vorliegen, navigieren Sie zum Django-Administrationsbereich, indem Sie der Basis-URL eine Admin-Route hinzufügen. http://127.0.0.1:8000/admin.

Wenn Sie im Admin-Bereich auf das Profilmodell klicken, wird unten ein Bildfeld hinzugefügt.

Wenn Sie ein Bild hochladen, wird im App-Ordner ein neuer Ordner mit dem Namen erstellt Medien. Wenn Sie den Ordner öffnen, sehen Sie das Bild, das Sie über das Admin-Panel hochgeladen haben.

6. Zeigen Sie das hochgeladene Bild an

Sie sollten die Profilvorlage aktualisieren, um das Profilbild anzuzeigen.

Sie werden eine hinzufügen Bild Tag und füllen Sie es mit dem Profilbild Attribut. Der ImageField verfügt über ein URL-Attribut, das die absolute URL zur Datei bereitstellt. Mithilfe von CSS-Klassen können Sie die Form und das Erscheinungsbild des Bildes festlegen.

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

Sie können den Server ausführen, um das Bild zu laden. Überprüfen Sie dann die Vorlage im Browser, um das angezeigte Bild zu sehen.

So laden Sie Bilder in eine Django-App hoch

Django erleichtert das Hochladen von Bildern in Ihre Anwendungen. Django verfügt in seinen Modellen über ein spezielles Feld, das vor dem Hochladen Dateitypen hinzufügt und überprüft.

Das ImageField stellt einen absoluten Pfad zu einem Dateisystem zum Speichern der Bilder bereit. Das Speichern der Bilder in einem Dateisystem erhöht die Geschwindigkeit der App und stellt sicher, dass die Datenbank nicht mit schädlichen Dateien infiltriert wird.