راهنمای آپلود تصاویر با برنامه جنگو

با این آموزش پایتون یک آپلود کننده تصویر ساده، اما موثر بسازید.

یکی از جذاب‌ترین ویژگی‌های یک اپلیکیشن مدرن، توانایی آن در قرار دادن تصاویر است. تصاویری مانند تصاویر، تصاویر و انیمیشن ها جذابیت بصری را برای یک برنامه به ارمغان می آورند.

اگرچه تصاویر مهم هستند، اما می توانند سرعت برنامه را کاهش دهند و تهدیدات امنیتی را برای پایگاه داده افزایش دهند.

برای برنامه های ساخته شده بر روی جنگو، آپلود تصاویر آسان و ایمن است. جنگو دارای یک ویژگی تخصصی است که امکان آپلود تصاویر را فراهم می کند.

بیایید بیاموزیم که چگونه تصاویر را بدون به خطر انداختن امنیت در یک برنامه جنگو آپلود کنیم.

آنچه شما نیاز دارید

قبل از شروع آپلود تصاویر، مطمئن شوید که شرایط زیر را دارید:

• پایتون را نصب کنید
• Pip را نصب کنید
• Pipenv را نصب کنید (در صورت تمایل می توانید از venv نیز استفاده کنید)
• جنگو را نصب کنید
• شما یک برنامه جنگو موجود دارید که به تصاویر نیاز دارد

اکنون که وابستگی های لازم را دارید، بیایید شروع کنیم.

1. بالش را نصب کنید

جنگو در مدل های خود یک ImageField دارد. این فیلد آپلودهای تصویر را در یک مکان مشخص در سیستم فایل ذخیره می کند، نه پایگاه داده. Pillow یک کتابخانه پایتون است که تصاویر را در ImageField بررسی می کند.

برای نصب بالش از دستور زیر استفاده کنید:

pipenv install pillow

اگر از venv استفاده می کنید، به جای آن از این دستور استفاده کنید

pip install pillow

2. ایجاد مدل

یک مرجع ImageField در پایگاه داده ایجاد کنید. سپس، آرگومان upload_to را در مدل اضافه کنید. آرگومان یک مکان ذخیره سازی را در سیستم فایل تعریف می کند.

class Profile(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):
        return f'{self.user.username} profile'

روش در پایان به تبدیل داده ها به رشته کمک می کند.

در مرحله بعد مهاجرت کرده و تغییرات جدید را در پایگاه داده انجام دهید. سپس، باید تنظیمات پروژه را ویرایش کنید.

3. URL رسانه را به تنظیمات پروژه اضافه کنید

به تنظیمات پروژه بروید. تحت عنوان # فایل های ثابت (CSS، جاوا اسکریپت، تصاویر)، 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

آرایه TEMPLATES را در تنظیمات پروژه به روز کنید. 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'
        ],
      },
  },
]

تنظیمات رسانه پردازنده به بارگیری تصاویر آپلود شده در قالب های برنامه کمک می کند.

4. Media Root را به URL ها اضافه کنید

در مرحله بعد، باید مسیر MEDIA_ROOT را به URL های برنامه اضافه کنید. این به بارگذاری تصاویر آپلود شده در سرور توسعه کمک می کند.

ابتدا تنظیمات پروژه را از ماژول django.conf و یک تابع استاتیک وارد کنید. سپس، یک مسیر ثابت که مکان فایل های آپلود شده را نشان می دهد، به الگوهای url اضافه کنید.

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

اگر خطایی وجود ندارد، با افزودن یک مسیر مدیریت به URL اصلی، http://127.0.0.1:8000/admin، به پنل مدیریت جنگو بروید.

در داخل پنل مدیریت، وقتی روی مدل Profile کلیک می کنید، یک فیلد تصویری را در پایین مشاهده خواهید کرد.

هنگامی که یک تصویر را آپلود می کنید، یک پوشه جدید در پوشه برنامه ایجاد شده به نام رسانه خواهید دید. وقتی پوشه را باز می کنید، تصویری را که از طریق پنل مدیریت آپلود کرده اید مشاهده می کنید.

6. تصویر آپلود شده را نمایش دهید

برای نمایش تصویر نمایه باید الگوی نمایه را به روز کنید.

شما یک تگ img اضافه می کنید و آن را با ویژگی profile_picture پر می کنید. ImageField یک ویژگی URL دارد که URL مطلق فایل را ارائه می دهد. با استفاده از کلاس های CSS می توانید شکل و ظاهر تصویر را مشخص کنید.

{% extends "base.html" %}
{% load static %}
 
{% block content %}
<div class="card mb-3 bg-whitesmoke" style="max-width:fit content;">
 <div class="row g-0">
 <div class="col-md-4">
 <img src="{{user.profile.profile_picture.url}}" width="100px" alt="profile pic" class="mx-auto d-block rounded-circle" />
 </div>
 </div>
</div>
{% endblock %}

برای بارگذاری تصویر می توانید سرور را اجرا کنید. سپس الگوی موجود در مرورگر را بررسی کنید تا تصویر نمایش داده شده را ببینید.

نحوه آپلود تصاویر در برنامه جنگو

جنگو آپلود تصاویر را در برنامه های شما آسان می کند. جنگو یک فیلد تخصصی در مدل های خود دارد که قبل از آپلود، نوع فایل را اضافه کرده و بررسی می کند.

ImageField یک مسیر مطلق به یک سیستم فایل برای ذخیره تصاویر ارائه می دهد. ذخیره تصاویر در یک سیستم فایل، سرعت برنامه را افزایش می دهد و تضمین می کند که فایل های مضر به پایگاه داده نفوذ نمی کند.

منبع مقاله