장고:사진 올리기
장고! 웹 프레임워크! 틀:장고
개요
사진을 올리고 관리하기 위해선 모델을 하나 만들어 개별적인 관리가 필요하다.
모델 작성
글쓰기를 구현했다면 글쓰기 모델에 약간의 변형을 주어보자. 아래의 image필드를 추가한다.
/앱/models.py 안에 작성한다.
from django.contrib.auth.models import User
from django.db import models
class Question(models.Model):#세부내용은 필요에 따라..
image=models.ImageField(upload_to='images/%Y/%m/%d', default='images/no_image.png')
#setting 값에 지정된 상대경로를 사용하기 위해 경로 처음엔 /를 두지 않는다.
upload_to는 저장할 경로를 정하는 것, default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.
pillow 설치
모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 python -m pip install Pillow를 입력하자.
각종 사전설정
업로드 폴더 설정
settings.py에 MEDIA_ROOT를 다음과 같이 설정한다.(기본설정이 없기 때문에 새로 써주어야 한다.)
MEDIA_URL='/media/' #미디어 파일을 불러올 때 사용할 가상 url을 설정한다.
MEDIA_ROOT=BASE_DIR / 'media' #기본프로젝트 하위의 media에서 모든 업로드 매체를 관리한다.
#media 하위에 앱이름으로 디렉터리를 만들고 파일을 업로드하게 된다.
유저가 업로드한 파일이 모두 여기에서 관리된다.
탬플릿 변경
등록 만들기
이미지를 등록하기 위해 create.html을 수정한다.
<form action="", method="post" enctype="multipart/form-data">
<!--enctype="multipart/form-data"를 추가한다. 이는 파일 업로드 때 사용하는 옵션으로, 데이터를 문자열로 인코딩하지 않는다.-->
<input type="file" name="image" id="image" accept="image/*" value="{{ form.image.value|default_if_none:''}}">
</form>
상세 페이지 변경
이미지가 보이는 곳은 상세화면이므로 detatil.html을 수정한다. 적당한 자리에 다음과 같은 형태로 끼워넣는다. image 속성 하위엔 url 속성이 있어 이를 통해 이미지를 가져온다.
{% if question.image %}<!--이미지 속성이 있을 때에만 부른다. 없으면 에러;;-->
<div>
<p><img src="{{question.image.url}}" style="width:90%"></p>
</div>
{% endif %}