23.04.14 TIL(django웹서비스에 image업로드 구현)

오늘 한 것: 팀 프로젝트 기능 구현, 오류 찾고 고치기

 

1. 프로필 페이지에 이미지 넣기

사용자가 이미지를 업로드 할 수 있는 기능을 만들기로 하였다. 사용자가 올리는 이미지나 파일들은 ImageField, 혹은 FileField에 경로가 저장된다. 여기에는 정확히는 해당 파일/이미지의 경로만이 저장된다.

 

 

먼저 Pillow라는 이미지처리 패키지를 설치한다.

pip3 install Pillow

 settings.py에서 다음과 같은 설정을 추가한다.

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

사용자가 올리는 파일들은 media 디렉토리 안에 저장된다. 이를 위해 media 경로를 지정해주는 것이다. 이후 이미지 업로드를 사용할 app의 urls.py에 다음과 같이 경로를 추가해준다.

urlpatterns = [
    ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

사용자가 이미지를 업로드 하기 위한 form은 다음과 같이 작성한다.

<form method="POST" action="{% url 'create' %}" enctype="multipart/form-data">
    {% csrf_token %}

    <input type="file" name="imgs" multiple>
</form>

반드시 from 태그에 enctype="multipart/form-data" 속성을 지정해야 파일을 업로드 할 수 있다. 또한 input 태그에 multiple 속성을 달면 여러 파일을 동시에 업로드할 수 있다.

 

사용자가 업로드한 이미지를 처리하기 위한 view는 다음과 같이 작성한다.

for img in request.FILES.getlist('imgs'):
    # image 객체 하나 생성
    image_obj = Image()
    image_obj.image = img
    # 데이터베이스에 저장
    image_obj.save()

 

사용자가 업로드한 이미지를 불러와서 표시할때의 template는 다음과 같이 작성한다.

<img src="{{photo.image.url}}">

사진이 잘 추가된다.

 

프로필이미지를 설정하지 않았을 때 기본 이미지를 띄우고 싶다면, media가 아닌 static을 이용한다.

static은 사용자가 아닌 개발자가 추가하여 사용하는 이미지, css, js파일등을 말한다.

 

먼저 setting.py에서 다음과 같이 설정한다.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '<app name>', 'static')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

스테틱 파일을 사용할 앱 디렉토리 안에 static 디렉토리를 만들고 그 안에 각각 img, js, css 디렉토리를 만들어 사용할 파일들을 저장해둔다.

이후 터미널에 python3 manage.py collectstatic 을 입력해 스테틱 파일들을 복사한다.

 

실제 템플릿에서 사용할때는 {% load static %} 가장 위에(상속받을 부모 템플릿 지정한 곳 보다는 아래에) 작성하고 실제로 사용할 곳에는 {% static 'path' %}와 같이 경로를 적어 사용한다.