Bangun pengunggah gambar yang sederhana, namun efektif, dengan tutorial Python ini.

Salah satu fitur yang paling menarik dari aplikasi modern adalah kemampuannya untuk mengakomodasi gambar. Gambar seperti gambar, ilustrasi, dan animasi membawa daya tarik visual ke aplikasi.

Meskipun Gambar itu penting, mereka dapat memperlambat aplikasi dan meningkatkan ancaman keamanan ke database.

Untuk aplikasi yang dibuat di Django, mengunggah gambar itu mudah dan aman. Django memiliki fitur khusus yang menyediakan unggahan gambar.

Mari pelajari cara mengunggah gambar ke aplikasi Django tanpa mengorbankan keamanan.

Apa yang kau butuhkan

Sebelum Anda mulai mengunggah gambar, pastikan Anda memiliki persyaratan berikut:

  • Instal Python
  • Instal Pipi
  • Install Pipenv (Anda juga dapat menggunakan venv jika diinginkan)
  • Instal Django
  • Anda memiliki Aplikasi Django yang membutuhkan Gambar

Sekarang setelah Anda memiliki dependensi yang diperlukan, mari kita mulai.

1. Pasang Bantal

Django memiliki Bidang Gambar dalam modelnya

instagram viewer
. Bidang menyimpan unggahan Gambar di lokasi yang ditentukan dalam sistem file, bukan database. Bantal adalah pustaka Python yang memeriksa gambar di ImageField.

Untuk memasang bantal gunakan perintah di bawah ini:

pipenv install pillow

Jika Anda menggunakan venv, gunakan perintah ini sebagai gantinya

pip install pillow

2. Buat Model

Buat sebuah Bidang Gambar referensi dalam database. Kemudian, tambahkan upload_to argumen dalam model. Argumen menentukan lokasi penyimpanan dalam sistem file.

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'

Metode pada akhirnya membantu mengubah data menjadi string.

Selanjutnya, migrasikan dan lakukan perubahan baru ke database. Kemudian, Anda perlu mengedit pengaturan proyek.

Arahkan ke pengaturan proyek. Di bawah judul # File statis (CSS, JavaScript, Gambar), tambahkan URL media.

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

Menambahkan URL media ke pengaturan menentukan rute khusus untuk menampilkan gambar yang diunggah. File media menyimpan gambar aplikasi. Jalannya akan terlihat seperti ini: 127.0.0.1:8000/media/profile/image.jpg

Perbarui TEMPLAT array dalam pengaturan proyek. Menambahkan django.template.context_processors.media ke larik template.

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

Pengaturan media prosesor membantu memuat gambar yang diunggah di template aplikasi.

Selanjutnya, Anda perlu menambahkan MEDIA_ROOT rutekan ke URL Aplikasi. Ini akan membantu memuat gambar yang diunggah ke server pengembangan.

Pertama, impor pengaturan proyek dari django.conf modul dan a fungsi statis. Kemudian, tambahkan ke urlpatterns rute statis yang menunjukkan lokasi file yang diunggah.

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. Uji Pengunggahan Gambar

Selanjutnya, jalankan server:

python manage.py runserver

Jika tidak ada kesalahan, arahkan ke panel admin Django dengan menambahkan rute admin ke URL dasar, http://127.0.0.1:8000/admin.

Di dalam panel admin, saat Anda mengklik Model profil, Anda akan melihat kolom gambar ditambahkan di bagian bawah.

Saat Anda mengunggah gambar, Anda akan melihat folder baru yang dibuat di folder aplikasi bernama media. Saat Anda membuka folder tersebut, Anda akan melihat gambar yang Anda unggah melalui panel admin.

6. Tampilkan Gambar yang Diunggah

Anda harus memperbarui template profil untuk menampilkan gambar profil.

Anda akan menambahkan sebuah img beri tag dan isi dengan foto profil atribut. Itu Bidang Gambar memiliki atribut URL yang menyediakan URL absolut ke file. Anda dapat menentukan bentuk dan tampilan gambar menggunakan kelas 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 %}

Anda dapat menjalankan server untuk memuat gambar. Kemudian periksa template di browser untuk melihat gambar yang ditampilkan.

Cara Mengunggah Gambar di Aplikasi Django

Django memudahkan mengunggah gambar di aplikasi Anda. Django memiliki bidang khusus pada modelnya yang menambah dan memeriksa jenis berkas sebelum diunggah.

ImageField menyediakan jalur absolut ke sistem file untuk menyimpan gambar. Menyimpan gambar dalam sistem file meningkatkan kecepatan aplikasi dan memastikan database tidak disusupi dengan file berbahaya.