😵 오늘 배운 것
📍 이미지 업로드하기
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>- 부트스트랩으로 이미지 파일을 여러개 슬라이드로 넘기면서 볼 수 있게 하려고 했는데 너무 오랜만에 써서 까먹은 듯하다 슬라이딩같은 행위가 들어가면 당연히 자바스크립트를 생각해냈어야 하는데,,!! 무튼 결론은 부트스트랩 쓰려면 헤더에 링크 복붙, 스크립트에 스크립트 복붙해야한다
