django media 파일 설정 이미지 파일 저장하기

[django] python django 게시판 만들기 - media 파일 설정

 

media를 해석하면 동적이다. 수시로 바뀔 수 있는 파일을 저장한다.

 

media 파일로 이미지를 넣어 글을 쓸때 이미지 넣어보기

---

model, admin 설정 : https://integer-ji.tistory.com/89

views에 데이터 가져오기 : https://integer-ji.tistory.com/90

detail page 만들기 : https://integer-ji.tistory.com/91

setting 설정, 데이터 자르기, 정렬하기 : https://integer-ji.tistory.com/93

getbootstrap으로 홈페이지 꾸미기 : https://integer-ji.tistory.com/94

템플릿 상속, url 관리하기 : https://integer-ji.tistory.com/95

디자인 쪼끔 수정 : https://integer-ji.tistory.com/97

글 쓰기 기능 만들기 : https://integer-ji.tistory.com/99

글 수정 기능 만들기 : https://integer-ji.tistory.com/100

글 삭제 기능 만들기 : https://integer-ji.tistory.com/101

form 이용하기, 글 수정 instance 가져오기 : https://integer-ji.tistory.com/102

Pagination : https://integer-ji.tistory.com/106

간단하게 검색기능 만들기 : https://integer-ji.tistory.com/107

static 파일 설정 : https://integer-ji.tistory.com/109

---

setting.py media 설정하기

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

 

static때와 마찬가지로 media가 저장될 경로를 설정합니다.

 

 

urls.py 설정하기

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
import crudapp.views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', crudapp.views.home, name='home'),
    path('crudapp/', include('crudapp.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

3번과 4번줄, 그리고 11번 줄이 추가되었습니다.

 

setting에서 셋팅한걸 불러와 경로를 지정해줘야 media파일을 저장할 수 있습니다.

 

 

models.py 설정하기

from django.db import models

class Blog(models.Model):
    title = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')
    body = models.TextField()
    images = models.ImageField(blank=True, upload_to="images", null=True)

    def __str__(self):
        return self.title

    def summary(self):
        return self.body[:100]

 

기존 글의 모델에 image를 추가해 주었습니다.

 

이미지 파일은 없을 수도 있으니 null을 허용해 줍니다.

 

 

Pillow 설치하기

python -m pip install Pillow

 

해당 명령어를 사용해서 pillow를 설치합니다. 

 

pillow를 설치해야 동적 파일을 사용할 수 있습니다.

 

 

models.py의 변경으로 인한 makemigrations / migrate

python manage.py makemigrations

python manage.py migrate

 

 

admin페이지에서 확인을 해보면 images 파일을 등록할 수 있는 걸 확인할 수 있습니다.

 

 

글쓰기에 이미지 등록 넣기

html 수정

{% extends 'base.html' %}

{% block content %}

<br>
<div class="container">
	<form action="{% url 'postcreate' %}" enctype="multipart/form-data" method="POST">
	  {% csrf_token %}
	  <h4>제목: </h4>
	  <input type="text" name="title">
	  <br>
	  <br>
	  <h4>본문: </h4>
	  <textarea cols=40 rows=10 name="body"></textarea>
	  <br>
	  <br>
	  <h4>사진: </h4>
	  <input type="file" name="images" accept="image/*">
	  <br>
	  <br>
	  <input class="btn btn-dark" type="submit" value="글쓰기">
  </form>
</div>

{% endblock %}

 

file를 받기 위해서 POST형식으로 바꿔준뒤 enctype를 설정해 줍니다.

 

 

views.py postcreate 함수 수정

def postcreate(request):
    blog = Blog()
    blog.title = request.POST['title']
    blog.body = request.POST['body']
    blog.images = request.FILES['images']
    blog.pub_date = timezone.datetime.now()
    blog.save()
    return redirect('/crudapp/detail/' + str(blog.id))

 

형식이 POST로 바뀌었으니 POST로 바꿔줍니다.

 

새로 추가된 FILES를 이용해 images를 가져옵니다.

 

 

detail.html 수정

{% extends 'base.html' %}

{% block content %}

    <div class="container"> 
        <div class="card">
          <div class="card-body">
            <h1>{{ blog.title }}</h1>
            <p>{{ blog.pub_date }}</p>
            <p>{{ blog.body }}</p>   
            <br>
            {% if blog.images %}
                <img src="{{ blog.images.url }}" width="500" height="500">
            {% endif %}
            <br>
            <br>
            <a href="{% url 'update' blog.id %}"><img src="/static/update.png" alt="수정" width="30"></a>
            <a href="{% url 'delete' blog.id %}"><img src="/static/delete.png" alt="삭제" width="30"></a>
          </div>
        </div>
      </div>
        
{% endblock %}

 

10번줄 ~ 16번 줄이 추가되었습니다.

 

models.py에서 이미지는 null값이 허용되기 때문에 이미지가 있을 수 있고 없을 수도 있습니다.

 

그러므로 출력을 할때 만약에 blog.images가 있다면 이미지를 출력하고 아니면 출력 안 합니다.

 

이미지를 가져오기 위해서는

 

blog.images / blog.images.url / blog.images.path가 있습니다.

 

blog.images는 db에 파일 경로가 문자열로 저장되어있기 때문에 작동을 안 합니다.

 

url은 media로부터 시작하는 상대 경로

 

path는 절대 경로를 나타냅니다.

 

 

확인

 

이미지를 올리고 글쓰기 버튼을 누르면

 

 

 

정상적으로 이미지가 등록된 모습을 볼 수 있습니다.

 

이 이미지 파일은 저희가 설정해준 곳에 들어갑니다.

 

 

create를 이미지도 넣게 수정하였으니 update도 수정하여야 합니다.

 

git push 하고 마무리

 

 

---

 

다음은 회원가입 기능 만들기