1017 TIL

looggi·2022년 10월 17일
1

스파르타 내배캠 AI-3

목록 보기
40/130
post-thumbnail

😵 오늘 배운 것

📍 이미지 업로드하기

http://www.django.co.zw/en/tutorials/setting-django-s-static-and-media-urls/

  • static/ : 개발자가 가지고 있는 이미지가 저장되는 곳
  • media/ : 사용자가 업로드하는 이미지가 저장되는 곳
  • media 파일 : FileField 를 통해 저장한 모든 파일
    ImageField 도 FileField 를 상속받은 필드로서 해당 필드로 저장된 파일도 media 파일

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

STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
➜디렉터리 경로가 하나이더라도 반드시 list나 tuple로 담아야 한다(쉼표 필수!!)

<img src="{{ file.image }}" >

➜ 파일 경로가 문자열로 저장되어서 그냥 문자열 출력

<img src="{{ file.image.url }}" > # 상대경로
<img src="{{ file.image.path }}" > # 절대경로

➜ 둘다 media파일을 참조하므로 이미지 출력가능

<img src="{% '파일.이미지.url' %}>
  • 미디어 파일(사용자가 업로드하는 사진들)을 저장하기 위해선 프로젝트 폴더의 settings.py에서 MEDIA_ROOT 와 MEDIA_URL을 설정해준다

  • 프로젝트 폴더나 이미지 파일을 사용하고자하는 폴더의 urls.py에 url패턴 뒤에 스태틱 메소드로 이미지 경로를 설정해준다

  • 
    from django.conf import settings
    from django.conf.urls.static import static
    
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    #또는 바로 더해버려도 됨
    urlpatterns[(생략)] +static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  • 이미지 업로드를 위해서는 PILLOW 패키지가 필요하다
    ➜ pip install pillow

  • 하나의 게시글에 이미지를 하나 업로드하려면 모델에 이미지 필드를 추가해주면 된다.
    ➜ varchar 칼럼에 저장됨

  • 하나의 게시글에 이미지를 여러개 업로드하려면 클래스를 만들어서 포스트 모델을 참조하도록 외래키 설정을 해준다 1:N 관계( 이미지 클래스에 포린키 모델을 만들어준다)

  • 보통 views.py에서 POST로 넘겨받은 값을 저장할 댄 request.POST를 사용하지만 파일 및 이미지를 받을 때는 request.FILES을 이용해야 한다

  • ❓input 태그의 onchange가 뭔지 모르겠다 ➜ 인풋의 내용이 바뀌면 onchange이하의 함수에 따라 변화가 생김

  • html의 <form></form> 인라인으로 enctype="multipart/form-data를 넣어주면 여러개의 이미지를 업로드 할 수 있다/설정하지 않으면 파일 이름만 POST

  • <input type="file" multiple/> 이것도 마찬가지로 다중파일 선택이 가능하다

  • 이미지 파일 여러개 보여주기
    ➜ 원래는 이미지 클래스가 포스트클래스를 참조하는데 image_set하면 역참조로 포스트클래스가 이미지 클래스를 참조해서 해당포스트의 이미지를 모두 불러온다(all)

    {% for photo in post.photo_set.all %}
        <img src="{{photo.image.url}}">
    {% endfor %}

    고래서 하나씩 불러다가 찍어줌

  • html파일에 이미지 삽입하는 인풋태그 안에 onchange="readURL(this);", 스크립트 부분에 아래 코드를 추가하면 올리려는 사진 미리보기를 할 수 있다

<script>
    function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('preview').src = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  } else {
    document.getElementById('preview').src = "";
  }
}
</script>
  • 부트스트랩으로 이미지 파일을 여러개 슬라이드로 넘기면서 볼 수 있게 하려고 했는데 너무 오랜만에 써서 까먹은 듯하다 슬라이딩같은 행위가 들어가면 당연히 자바스크립트를 생각해냈어야 하는데,,!! 무튼 결론은 부트스트랩 쓰려면 헤더에 링크 복붙, 스크립트에 스크립트 복붙해야한다
profile
looooggi

0개의 댓글