https://www.youtube.com/watch?v=gHCyMBqv_U0&list=PLvX6vpRszMkwECdbxNX8s9R-vcUFGqqtC&index=9
1. django_web/settings.py
이미지 파일을 저장할 폴더 위치 설정
# 이미지 파일을 저장할 폴더 위치
MEDIA_URL = '/media/'
MEDIA_ROOT= os.path.join(BASE_DIR, 'media')
2. webapp/urls.py
from django.conf.urls import url
from . import views
from django.conf import settings
from django.conf.urls.static import static
# 어떤 글자가 들어오던지 views의 first_view 함수로 가라
# /uimage 로 들어오면 views의 uimage 함수로 전달해라
urlpatterns = [
url(r'^$', views.first_view, name='first_view'),
url(r'^uimage/$', views.uimage, name='uimage'),
]
# 이미지 파일을 업로드 하기 위한 설정
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
3. webapp/views.py
이미지 업로드, 이미지 저장 후
from django.shortcuts import render
from .forms import UploadImageForm # 이미지 업로드 form
from django.core.files.storage import FileSystemStorage # 이미지 저장
# urls에서 요청이 오면 first_view로 오는데, 이 때 ~.html을 rendering 해줘라
def first_view(request):
return render(request, 'webapp/first_view.html', {})
def uimage(request):
if request.method == 'POST':
form = UploadImageForm(request.POST, request.FILES) # 이미지르 업로드할때 쓰는 form
if form.is_valid():
myfile = request.FILES['image']
#
fs = FileSystemStorage() # 이미지 파일을 저장할때 쓰는 함수
filename = fs.save(myfile.name, myfile)
uploaded_file_url = fs.url(filename)
return render(request, 'webapp/uimage.html', {'form': form, 'uploaded_file_url' : uploaded_file_url})
else:
form = UploadImageForm()
return render(request, 'webapp/uimage.html', {'form': form})
4. webapp/forms.py
생성 후 입력
from django.shortcuts import render
from .forms import UploadImageForm # 이미지 업로드 form
from django.core.files.storage import FileSystemStorage # 이미지 저장
# urls에서 요청이 오면 first_view로 오는데, 이 때 ~.html을 rendering 해줘라
def first_view(request):
return render(request, 'webapp/first_view.html', {})
def uimage(request):
# 글을 쓸때는 여기 수행
# 글쓰기를 눌렀을땐 여기로
if request.method == 'POST':
form = UploadImageForm(request.POST, request.FILES) # 이미지르 업로드할때 쓰는 form
# form을 받아서 그게 유요한지 테스트 후
if form.is_valid():
myfile = request.FILES['image']
#
fs = FileSystemStorage() # 이미지 파일을 저장할때 쓰는 함수
filename = fs.save(myfile.name, myfile)
# 이미지를 업로드 하고
uploaded_file_url = fs.url(filename)
# html로 렌더링
return render(request, 'webapp/uimage.html', {'form': form, 'uploaded_file_url' : uploaded_file_url})
# 보여줄 때는 이곳 수행
# 제일 처음엔 form을 받아와서 uimage.html에 보내주고
else:
form = UploadImageForm()
return render(request, 'webapp/uimage.html', {'form': form})
5. webapp/templates/webapp/uimage.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>image upload example</h1>
<form method="POST" class="post-form" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="save btn btn-default" value=""upload">save!!</button>
</form>
{% if uploaded_file_url %}
<img src="{{ uploaded_file_url }}">
<p>File uploaded at: <a href="{{ uploaded_file_url }}">{{ uploaded_file_url }}</a></p>
{% endif %}
<p><a href="{% url 'uimage' %}">Return to home</a></p>
</body>
</html>## 1. 우리 form이 보여지도록
{{ form.as_p }}
## 2. 업로드 버튼 구현
<button type="submit" class="save btn btn-default" value=""upload">save!!</button>
</form>
## 3. 사진이 업로드되어 POST 모드 일 때 uploaded_file_url 변수가 정의가 되있으면 uploaded_file_url 를 가져와서 이미지를 보여주는 코드
{% if uploaded_file_url %}
<img src="{{ uploaded_file_url }}">
<p>File uploaded at: <a href="{{ uploaded_file_url }}">{{ uploaded_file_url }}</a></p>
{% endif %}
6. 이미지 호출 함수 설치
>> pip install pillow
7. DB 업데이트
>> python manage.py migrate
8. 확인
>> python manage.py runserver 127.0.0.1:8000
>> 웹에서 확인 http://127.0.0.1:8000/uimage
html 창이 잘 뜨고, 업로드 후 이미지가 잘 보여지는 것을 확인할 수 있다
'WEB > Django' 카테고리의 다른 글
| Djangh(장고) 구축 코드로 일단 따라해보기(1) (0) | 2020.05.27 |
|---|---|
| Django 입문, 한줄한줄 따라하기!! (3) (0) | 2020.05.22 |
| Django 입문, 한줄한줄 따라하기!! (2) (0) | 2020.05.22 |
| Django 입문, 한줄한줄 따라하기!! (1) (0) | 2020.05.21 |
