[Django] woojin's blog 프로젝트: 유저가 업로드하는 정적파일

이전에 활용했던 정적파일은 CSS파일을 활용하여 웹 페이지를 꾸미는 것이었다. 이번엔 내가 직접 정적파일(사진)을 업로드하여 웹 페이지에 보여줘보자.

 

1. 유저가 업로드하는 정적파일 설정

우선 유저가 업로드한 파일에 접근할 수 있도록 경로를 설정해 주자. css파일을 가져올 떄 설정했던 것과 같이 설정해주면 된다.

[config/settings.py]

MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'

이 설정을 해주면 앞으로 유저가 업로드한 파일은 자동으로 ~PycharmProject/woojin's blog/media 에 업로드된다.

 

2. 정적파일을 저장하는 필드 추가

이제 데이터베이스에 정적파일이 저장되도록 만들어보자. 데이터베이스 관련한 파일은 models.py !! 기존에 잇던 Post에 같이 만들어주자

[blog/models.py]

class Post(models.Model):   # 글 모델
    title = models.CharField('포스트 제목', max_length=100)
    content = models.TextField('포스트 내용')
    thumbnail = models.ImageField('썸네일 이미지', upload_to='post', blank=True)

ImageField를 이용하여 이미지 파일을 저장할 수 있는데 이때 Pillow 패키지가 설치되어 있어야 한다.

> pip install 'Pillow<10'

다음 변경사항을 DB에 적용하는 코드를 작성한다.

> python manage.py makemigrations

> pyhon manage.py migrate

썸네일 이미지가 생성된 것을 확인할 수 있다.

 

3. MEDIA_URL과 업로드 파일 연결

이제 유저가 파일을 업로드하면 이것을 불러오게 할 수 있는 설정을 해볼 것이다.

[config/urls.py]

from django.conf import settings
from djang.conf.urls.static import static


urlpatterns += static(
	# URL의 접두어가 MEDIA_URL 일 때는 정적파일을 돌려준다.
	prefix=settings.MEDIA_URL,
    # 돌려줄 디렉터리는 DOUMENT_ROOT를 기준으로 한다.
    document_root = settings.MEDIA_ROOT,
   )

4.템플릿에 업로드된 파일 보여주기

[blog/admin.py]

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
	list_display = ['title', 'thumbnail']

5. ImageField의 속성들

post = Post.objects.first()

>>> post.thumbnail     # 정보를 확인

>>> post.thumbnail.name    # 저장된 이미지의 경로

>>> post.thumbnail.path     # 시스템 전체를 기준으로 이미지 전체 경로

>>> post.thumbnail.size     # 저장된 파일의 bytes 수

>>> post.thumbnail.url     # MEDIA_URL을 기준으로 이미지의  접근 URL을 생성

 

6. 템플릿에 이미지 표시

[templates/post_list.html]

{% if post.thumbnail %}
	<img src="{{ post.thumbnail.url }}" alt="">
{% else %}	# 파일이 없는 경우에 오류 없이 화면을 표시
	<img src="" alt="">
{% endif %}

다음은 실제 블로그와 같이 글을 눌렀을 때 상세페이지로 들어가는 과정을 작업해보자!!