멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

CKEditor(2)

이미지 파일 업로드 

  • 이전 토픽에서 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가 알아서 날짜를 디렉토리로 생성하고 이미지 파일이 생성된 것을 볼 수 있습니다.

 

 

 

 

댓글

댓글 본문
  1. 익명
    업로드에러나네요
    세팅파일수정후 정상작동합니다.
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기