TIL(33일차)

메인 페이지에서 사용자가 이미지 파일을 업로드 하는 과정에서 db로 업로드한 이미지 파일이 저장되지 않았다. 매번 프로젝트 진행할 때 이미지 처리가 가장 어려웠는데 역시나 이번에도 이미지 업로드 후 db로 저장하는 과정이 어려웠다.

우선 모델은 pip install django-imagekit 명령어를 사용하여 모듈을 install 해주었고, 사용자가 업로드한 파일 확장자를 JPEG 형식으로 변경해주기 위해 ProcessedImageField를 사용했다. 만약 사용자가 업로드한 파일을 변경할 필요가 없는 경우는 그냥 ImageField로 사용하면 된다.

그리고 upload_to는 파일이 저장될 위치를 설정하는 것인데 현재 settings.py에서 이미지를 저장하는 기본 경로를 media로 설정해두었고, media 폴더 내 images폴더로 저장할 것이기 때문에 images로 설정했다.

models.py
#pip install pillow로 pillow 패키지를 받아야 image/file field 사용 가능

class TweetModel(models.Model):
    class Meta:
        db_table = 'tweet_table'

    upload_img = ProcessedImageField(
        upload_to='images', 
        format='JPEG', 
        options = {'quality': 60})

settings.py의 media_url은 각 media파일에 접근할 때 접두사(prefix)의 역할으로 url 설정에 의해 참조되는 설정이다.
media_root는 파일필드를 통한 저장 시 실제로 파일을 저장할 root(경로)이다.

settings.py

MEDIA_URL = '/media/'   # ex) /media/photo1.png
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

django에서 runserver 명령을 통한 개발환경에서는 media 파일을 자동으로 서빙해주지 않는다. 따라서 수동으로 urlpatterns를 추가하여 media 파일을 서빙하여야 한다.

app urls.py

from django.urls import path
from . import views
from Django_AI.settings import MEDIA_URL, MEDIA_ROOT
from django.conf.urls.static import static

app_name = 'tweet'

urlpatterns = [
    path("", views.home, name='home'),
]

# MEDIA_URL로 들어오는 요청에 대해 MEDIA_ROOT 경로를 탐색
# DEBUG가 False인 경우 빈 리스트를 반환
if settings.DEBUG:
	urlpatterns += static(settings.MEDIA_URL, document_root=MEDIA_ROOT)

html에서 form을 통해 media 파일을 저장할 때는 method는 post, action으로 입력된 정보를 받을 url을 설정하고, entype을 multipart로 지정해주어야 정상적으로 파일이 넘어간다.

html

<form action="{% url 'tweet:home' %}" enctype="multipart/form-data" id="imageUploadForm" method="POST" name="aaa">
      {% csrf_token %}
      <!-- 사진 업로드 하는 부분-->
      <div class="input-group">
        <input type="file" class="form-control" id="upload_img" aria-describedby="inputGroupFileAddon04" aria-label="Upload" name="upload_img" placeholder="sadasd">
      </div>

form으로 넘어온 파일은 request 객체의 FILES를 통해 접근하여 모델에 저장한다.

views.py

elif request.method == 'POST':
        upload_img = request.FILES['upload_img']
        
        tweet = TweetModel()        
        tweet.upload_img = upload_img
        tweet.save()

참고한 블로그 링크

처음 팀 프로젝트를 할 때 한 번도 다뤄본적 없는 이미지 필드를 uuid로 저장하는 방식으로 경험해서 그런지 이미지 필드를 다루는 것이 굉장히 어렵게만 느껴졌는데 uuid를 사용하지 않은 이미지 처리는 생각보다 어렵지 않고, 단순했다.

이번 계기로 이미지를 보다 쉽게 다룰 수 있으면 좋겠고, uuid를 사용한 이미지 처리 방법도 익혀야 할 것 같다.