이미지 파일 업로드
- 이전 토픽에서 CKEditor를 적용시켜보았습니다.
이는 글자를 편집할 수 있는 데에 있어 편한 툴입니다.
하지만 몇가지 테스트를 해보면 알 수 있듯이 이미지 파일을 업로드할 수는 없습니다.
- 이미지 파일 업로드 기능을 구현하기 위해 몇가지 추가적으로 설정을 추가해주도록 하겠습니다.
[firstProject]-[settings.py]에서 [INSTALLED_APPS]에 다음을 추가합니다. 'ckeditor_uploader',
업로드 파일의 경로를 지정해주기 위해 다음을 추가합니다. CKEDITOR_UPLOAD_PATH = "uploads/"
[settings.py] 맨 아래에 다음 2줄을 추가해 줍니다. MEDIA_URL = '/media/' MEDIA_ROOT = 'media/'
- 지금까지 정적 파일들은 'static' 루트에 모아두었습니다.
- 마찬가지로 사용자들이 올리는 파일들은 'media'로 분류가 되며, 'media' 루트를 설정해주는 것입니다.
- 위에서 'CKEDITOR_UPLOAD_PATH'를 설정해주었는데, 이는 'media' 루트 디렉토리의 하위 디렉토리로 위치하게 됩니다.
[firstProject]-[urls.py]에서 url을 추가해주도록 합니다.
from django.conf.urls import include
path('ckeditor/', include('ckeditor_uploader.urls')),
- 이는 'ckeditor_uploader'가 url을 참조할 수 있도록 설정하는 부분입니다.
마지막으로 MEDIA 경로를 참조하기 위해 다음을 추가하도록 합니다. from django.conf import settings from django.conf.urls.static import static urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
[models.py]에서 파일 업로드 필드로 적용시키기 위해 다음과 같이 수정합니다. from ckeditor_uploader.fields import RichTextUploadingField body = RichTextUploadingField()
[Tools]-[Run manage.py Task]를 켜고 모델을 적용시키도록 합니다. makemigrations migrate
적용 확인
- 서버를 구동하고 admin 페이지에 접속하여 블로그를 생성해보도록 합니다.
- 빨간색 버튼을 눌러서 이미지를 업로딩해보도록 하겠습니다.
[Upload] 버튼을 누르고 파일을 선택한 뒤 [Send it to the Server]를 누르고 [OK]합니다.
- 다음과 같이 이미지를 수정할 수 있는 창이 뜹니다.
- 적용된 모습입니다.
- 저장을 하고 PyCharm으로 돌아와서 어떻게 저장되었는지 확인해봅시다.
- 우리가 설정한 경로 'media/uploads'에 CKEditor가 알아서 날짜를 디렉토리로 생성하고 이미지 파일이 생성된 것을 볼 수 있습니다.
