בנה מעלה תמונה פשוטה, אך יעילה, עם הדרכה זו של Python.

אחת התכונות המושכות ביותר של אפליקציה מודרנית היא היכולת שלה להכיל תמונות. תמונות כגון תמונות, איורים ואנימציות מביאות משיכה ויזואלית לאפליקציה.

בעוד שתמונות חשובות, הן יכולות להאט את האפליקציה ולהגביר את איומי האבטחה על מסד הנתונים.

עבור יישומים הבנויים על Django, העלאת תמונות קלה ומאובטחת. ל-Django יש תכונה מיוחדת המספקת העלאת תמונות.

בואו ללמוד כיצד להעלות תמונות לאפליקציית Django מבלי לפגוע באבטחה.

מה אתה צריך

לפני שתתחיל להעלות תמונות, ודא שיש לך את הדרישות הבאות:

  • התקן את Python
  • התקן את Pip
  • להתקין Pipenv (אפשר גם להשתמש ב-venv אם תרצה)
  • התקן את Django
  • יש לך אפליקציית Django קיימת שצריכה תמונות

עכשיו כשיש לך את התלות הנדרשת, בואו נתחיל.

1. התקן כרית

לג'נגו יש ImageField בדגמים שלה. השדה מאחסן העלאות תמונות במיקום מוגדר במערכת הקבצים, לא במסד הנתונים. כרית היא ספריית Python שבודקת תמונות ב-ImageField.

להתקין כרית השתמש בפקודה למטה:

pipenv install pillow

אם אתה משתמש ב-venv, השתמש בפקודה זו במקום זאת

pip install pillow

2. צור מודל

ליצור ImageField

instagram viewer
הפניה במסד הנתונים. לאחר מכן, הוסף את להעלות ל טיעון במודל. הארגומנט מגדיר מיקום אחסון במערכת הקבצים.

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, תמונות), הוסף את כתובת האתר של המדיה.

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

הוספת כתובות אתרים של מדיה להגדרות מגדירה מסלול ספציפי להצגת תמונות שהועלו. קובץ המדיה מאחסן את תמונות האפליקציה. הנתיב ייראה כך: 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 תג ואכלס אותו ב- תמונת פרופיל תְכוּנָה. ה ImageField בעל תכונת 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 מספק נתיב מוחלט למערכת קבצים לאחסון התמונות. אחסון התמונות במערכת קבצים מגביר את מהירות האפליקציה ומבטיח שהבסיס לא יוחדר עם קבצים מזיקים.