최신 애플리케이션의 주요 매력 중 하나는 시각적 요소, 특히 인터페이스의 미적 매력을 향상시키는 사진, 그래픽, 애니메이션과 같은 이미지를 통합할 수 있다는 점입니다.
시각적 요소는 애플리케이션의 전반적인 사용자 경험에서 중요한 역할을 하지만, 이러한 요소가 포함되면 성능이 저하되고 데이터베이스의 안전에 대한 잠재적 위험이 높아질 수 있습니다.
장고 프레임워크는 해당 플랫폼을 사용하여 개발된 애플리케이션에서 이미지를 업로드하기 위한 효율적이고 안전한 솔루션을 제공합니다. 이 기능은 이미지 업로드를 처리하도록 특별히 설계된 Django 내 전용 기능을 통해 촉진됩니다.
어떻게 하면 기밀을 유지하고 잠재적인 위협으로부터 보호하면서 이미지를 효과적으로 Django 애플리케이션에 업로드할 수 있을까요?
필요한 것
이미지 업로드 프로세스를 시작하기 전에 충족해야 하는 전제 조건은 다음과 같습니다:
시스템에 PIP를 설치하는 데 도움을 드리겠습니다.
설치 Pipenv (원하는 경우 venv를 사용할 수도 있음)
현재 상태는 이미지 콘텐츠를 통합해야 하는 Django 애플리케이션과 관련되어 있습니다.
앞서 언급한 전제 조건이 충족되면 바로 시작할 수 있습니다.
Pillow 설치
Django 프레임워크는 구조적 구성 요소 내에 이미지 파일을 데이터베이스 내에 보관하지 않고 파일 시스템의 지정된 디렉터리에 저장하는 데 사용되는 ImageField를 통합하고 있습니다. Pillow라고도 하는 그림 라이브러리는 이미지 필드 내에서 이러한 시각적 미디어를 감지하고 관리하는 중개자 역할을 합니다.
제공된 지침에 따라 필요한 패키지를 설치하고, 설치 목적으로 지정된 명령을 사용하여 실행할 수 있습니다.
pipenv install pillow
가상 환경(venv)을 사용하는 대신 이 대체 명령을 사용하십시오.
pip install pillow
모델 생성
데이터베이스 내에 이미지 필드를 통합하려면 먼저 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'
이 프로세스는 정보를 문자열 형식으로 변환하는 기술로 마무리됩니다.
업데이트된 코드 변경 사항을 구현한 후에는 이를 데이터베이스에 마이그레이션하고 커밋해야 합니다.그 다음에는 프로젝트 설정을 수정해야 합니다.
프로젝트 설정에 미디어 URL 추가
프로젝트 설정으로 이동하여 “# 정적 파일(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')
프로젝트 설정에서 템플릿 배열에 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'
],
},
},
]
프로세서의 미디어 설정은 애플리케이션 템플릿 내에서 업로드된 이미지를 쉽게 로드할 수 있도록 합니다.
URL에 미디어 루트 추가
앞서 언급한 단계에는 개발 서버에서 미디어 파일을 업로드하고 표시하는 데 필수적인 애플리케이션의 URL 패턴 내에 MEDIA\_ROOT 경로 구성을 통합하는 것이 포함됩니다.
사전 정의된 정적 함수와 함께 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()
테스트 이미지 업로드
앞서 언급한 단계를 수행한 후 서버를 시작하는 것이 좋습니다.
python manage.py runserver
오류가 없으면 기본 URL인 http://127.0.0.1:8000/admin 에 관리자 경로를 추가하여 Django 관리자 패널로 이동합니다.
관리 패널에 액세스하고 프로필 모델을 선택하면 페이지 하단에 추가 이미지 필드가 나타납니다.
이미지를 업로드하면 애플리케이션의 디렉토리 내에 “미디어”라는 새 폴더가 생성됩니다. 해당 폴더에 액세스하면 관리자 인터페이스를 통해 제출된 이미지가 표시됩니다.
업로드된 이미지 표시
사용자의 프로필 템플릿이 프로필 사진을 표시하도록 수정되어야 합니다.
{% 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 %}
사용자 지정 도메인으로 애플리케이션을 배포하는 프로세스에는 DNS 설정을 구성하고 FTP를 사용하여 호스팅 서비스에 웹사이트 파일을 업로드하는 등 여러 단계가 포함됩니다. 이 작업이 완료되면 웹 브라우저에서 사이트로 이동하거나 로컬 개발 서버를 실행하여 사이트에 액세스하여 변경 사항을 미리 볼 수 있습니다.
장고 앱에서 이미지를 업로드하는 방법
장고 프레임워크를 활용하면 애플리케이션 구성 요소 내에 시각적 미디어를 통합하는 프로세스가 용이해집니다. 이는 업로드하기 전에 파일 유형을 수락하고 확인하는 작업을 수행하는 전용 모델 필드의 통합을 통해 이루어집니다.
이미지필드는 파일 시스템 내에서 이미지 데이터를 저장할 수 있는 정확한 경로를 제공하여 애플리케이션의 효율성을 높이는 동시에 악성 파일을 배제하여 데이터베이스의 무결성을 보호합니다.