Δημιουργήστε ένα απλό, αλλά αποτελεσματικό πρόγραμμα μεταφόρτωσης εικόνων με αυτό το σεμινάριο Python.

Ένα από τα πιο ελκυστικά χαρακτηριστικά μιας σύγχρονης εφαρμογής είναι η ικανότητά της να φιλοξενεί εικόνες. Εικόνες όπως εικόνες, εικονογραφήσεις και κινούμενα σχέδια προσδίδουν οπτική έλξη σε μια εφαρμογή.

Αν και οι Εικόνες είναι σημαντικές, μπορούν να επιβραδύνουν την εφαρμογή και να αυξήσουν τις απειλές ασφαλείας για τη βάση δεδομένων.

Για εφαρμογές που βασίζονται στο Django, η μεταφόρτωση εικόνων είναι εύκολη και ασφαλής. Το Django διαθέτει μια εξειδικευμένη δυνατότητα που παρέχει μεταφόρτωση εικόνων.

Ας μάθουμε πώς να ανεβάζετε εικόνες σε μια εφαρμογή Django χωρίς να τίθεται σε κίνδυνο η ασφάλεια.

Ο, τι χρειάζεσαι

Πριν ξεκινήσετε τη μεταφόρτωση εικόνων, βεβαιωθείτε ότι έχετε τις ακόλουθες απαιτήσεις:

  • Εγκαταστήστε την Python
  • Εγκαταστήστε το Pip
  • Εγκαθιστώ Pipenv (μπορείτε επίσης να χρησιμοποιήσετε venv αν θέλετε)
  • Εγκαταστήστε το Django
  • Έχετε μια υπάρχουσα εφαρμογή Django που χρειάζεται Εικόνες
instagram viewer

Τώρα που έχετε τις απαραίτητες εξαρτήσεις ας ξεκινήσουμε.

1. Τοποθετήστε μαξιλάρι

Ο Django έχει ένα Πεδίο εικόνας στα μοντέλα της. Το πεδίο αποθηκεύει τις μεταφορτώσεις εικόνων σε μια καθορισμένη θέση στο σύστημα αρχείων και όχι στη βάση δεδομένων. Μαξιλάρι είναι μια βιβλιοθήκη Python που ελέγχει για εικόνες στο ImageField.

Για εγκατάσταση μαξιλάρι χρησιμοποιήστε την παρακάτω εντολή:

pipenv install pillow

Εάν χρησιμοποιείτε venv, χρησιμοποιήστε αυτήν την εντολή

pip install pillow

2. Δημιουργία μοντέλου

Δημιουργήστε ένα Πεδίο εικόνας αναφορά στη βάση δεδομένων. Στη συνέχεια, προσθέστε το upload_to επιχείρημα στο μοντέλο. Το όρισμα ορίζει μια θέση αποθήκευσης στο σύστημα αρχείων.

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'

Η μέθοδος στο τέλος βοηθά στη μετατροπή των δεδομένων σε συμβολοσειρές.

Στη συνέχεια, μετεγκαταστήστε και πραγματοποιήστε τις νέες αλλαγές στη βάση δεδομένων. Στη συνέχεια, πρέπει να επεξεργαστείτε τις ρυθμίσεις του έργου.

Μεταβείτε στη ρύθμιση του έργου. Κάτω από την επικεφαλίδα # Στατικά αρχεία (CSS, JavaScript, Εικόνες), προσθέστε τη διεύθυνση 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')

Η προσθήκη διευθύνσεων URL πολυμέσων στις ρυθμίσεις ορίζει μια συγκεκριμένη διαδρομή για την εμφάνιση των μεταφορτωμένων εικόνων. Το αρχείο πολυμέσων αποθηκεύει τις εικόνες της εφαρμογής. Η διαδρομή θα μοιάζει με αυτό: 127.0.0.1:8000/media/profile/image.jpg

Ενημερώστε το ΠΡΟΤΥΠΑ πίνακα στις ρυθμίσεις του έργου. Προσθήκη django.template.context_processors.media στον πίνακα προτύπων.

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

Η ρύθμιση πολυμέσων του επεξεργαστή βοηθά στη φόρτωση των μεταφορτωμένων εικόνων στα πρότυπα της εφαρμογής.

Στη συνέχεια, πρέπει να προσθέσετε το MEDIA_ROOT διαδρομή προς τις διευθύνσεις URL της εφαρμογής. Αυτό θα σας βοηθήσει να φορτώσετε τις μεταφορτωμένες εικόνες στον διακομιστή ανάπτυξης.

Πρώτα, εισαγάγετε τις ρυθμίσεις του έργου από το django.conf ενότητα και α στατική λειτουργία. Στη συνέχεια, προσθέστε στο urlpatterns μια στατική διαδρομή που δείχνει τη θέση των μεταφορτωμένων αρχείων.

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. Δοκιμή μεταφορτώσεων εικόνων

Στη συνέχεια, εκτελέστε τον διακομιστή:

python manage.py runserver

Εάν δεν υπάρχουν σφάλματα, μεταβείτε στον πίνακα διαχείρισης του Django προσθέτοντας μια διαδρομή διαχειριστή στη βασική διεύθυνση URL, http://127.0.0.1:8000/admin.

Μέσα στον πίνακα διαχείρισης, όταν κάνετε κλικ στο μοντέλο Προφίλ, θα δείτε ένα πεδίο εικόνας να προστίθεται στο κάτω μέρος.

Όταν ανεβάζετε μια εικόνα, θα δείτε έναν νέο φάκελο που δημιουργείται στο φάκελο της εφαρμογής που ονομάζεται μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ. Όταν ανοίξετε το φάκελο, θα δείτε την εικόνα που ανεβάσατε μέσω του πίνακα διαχείρισης.

6. Εμφάνιση της μεταφορτωμένης εικόνας

Θα πρέπει να ενημερώσετε το πρότυπο προφίλ για να εμφανιστεί η εικόνα προφίλ.

Θα προσθέσετε ένα img επισημάνετε και συμπληρώστε το με το εικόνα προφίλ Χαρακτηριστικό. ο Πεδίο εικόνας έχει ένα χαρακτηριστικό URL που παρέχει την απόλυτη διεύθυνση URL στο αρχείο. Μπορείτε να καθορίσετε το σχήμα και την εμφάνιση της εικόνας χρησιμοποιώντας κλάσεις CSS.

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

Μπορείτε να εκτελέσετε τον διακομιστή για να φορτώσετε την εικόνα. Στη συνέχεια, ελέγξτε το πρότυπο στο πρόγραμμα περιήγησης για να δείτε την εικόνα που εμφανίζεται.

Πώς να ανεβάσετε εικόνες σε μια εφαρμογή Django

Το Django διευκολύνει τη μεταφόρτωση εικόνων στις εφαρμογές σας. Η Django διαθέτει ένα εξειδικευμένο πεδίο στα μοντέλα της που προσθέτει και ελέγχει τον τύπο αρχείου πριν από τη μεταφόρτωση.

Το ImageField παρέχει μια απόλυτη διαδρομή προς ένα σύστημα αρχείων για την αποθήκευση των εικόνων. Η αποθήκευση των εικόνων σε ένα σύστημα αρχείων αυξάνει την ταχύτητα της εφαρμογής και διασφαλίζει ότι η βάση δεδομένων δεν διεισδύει επιβλαβή αρχεία.