django | Media 파일

static : 개발자가 준비하는 파일

media : 이용자들이 올리는 파일

 

 

settings.py (=> media 설정)

MEDIA_ROOT = os.path.join(BASE_DIR, 'media') #이용자가 업로드한 파일을 모아두는 곳
MEDIA_URL = '/media/'

 

urls.py (=> media 설정)

from django.contrib import admin
from django.urls import path, include # include 작업을 분리해서 앱의 urls.py로 넘겨준다
import blog.views

#static, media 관련 내용 import
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blog.views.home, name='home'),
    path('blog/', include('blog.urls'))
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

웹 통신할 때 서버와 클라이언트는 기본적으로 URL을 통해서 통신.

=> static, media도 마찬가지.

맨 마지막 줄 urlpatterns += 이 코드는 그냥 이렇게 해야 올린 이미지를 읽어올 수 있구나~ 이해하고 넘어가면 됨.

 

 

models.py

사용자가 올린 파일을 저장할 DB를 작성해야 함.

from django.db import models

# Create your models here.
class Blog(models.Model):
    title = models.CharField(max_length=200)
    writer = models.CharField(max_length=10)
    pub_date = models.DateTimeField()
    body = models.TextField()
    image = models.ImageField(upload_to="blog/", blank=True, null=True)

    def __str__(self):
        return self.title

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

image = models.ImageField(upload_to="blog/", blank=True, null=True)

 

upload_to = 'blog/'

#업로드된 이미지들을 media 폴더 안의 blog 폴더에 넣어라.

   (MEDIA_ROOT 부분과 이어지는 부분이라고 생각하기. 폴더는 자동으로 생성됨).

 

Blog 테이블에 image라는 필드(컬럼)를 추가했음

but, blog 테이블에 이미 row가 존재하는 경우

: 이미 넣었던 데이터(row)들은 image 컬럼에는 아무것도 들어있지 않음 => 오류 발생 가능성 有

   => blank=True, null=True

         (or  migrations 초기화, db 삭제하고 다시 migrations 해주면 오류 없이 진행 가능)

 

 

 

$ pip install Pillow  #Pillow 설치

 

Pillow

• 파이썬 이미징 라이브러리.
• 여러 이미지 파일 포맷 지원.
• 이미지 내부 데이터를 엑세스할 수 있게 함.
• 다양한 이미지 처리 기능 제공.

 

=> models.py의 필드를 수정했으므로 makemigrations, migrate 다시 해줘야함.

 

 

 

new.html

{% extends 'base.html' %}
{% block content %}
    <h1>New Blog Entry</h1>
    <form action="{% url 'blog:create' %}" method="post" enctype="multipart/form-data">
        {%csrf_token%}
        <p>제목: <input type="text" name="title"></p>
        <p>작성자: <input type="text" name="writer"></p>
        <p>사진: <input type="file" name="image" /></p>
        본문: <br><textarea name="body" id="" cols="30" rows="10"></textarea><br>
        <button type='submit'>작성하기</button>
    </form>
{%  endblock %}

input 태그 사용 => request(create)할 때 이미지도 함께 보내준다.

 

form 태그에서 enctype 속성 지정하기 

  지정 x => views에서 request 처리할 때 에러 발생!

enctype = "multipart/form-data"

 

데이터 전송 방식 : GET/POST

GET : url에 폼 데이터 노출 => 입력내용 길이제한 有 (256~4096byte)

POST :  폼 데이터 노출 x but, 그래도 데이터 양의 한계는 有

 

=> enctype 사용 (<form enctype="속성값">)

        폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩 되는 방법을 명시,

        <form> 요소의 method 속성값이 "POST"인 경우에만 사용 가능.

       

속성값	의미
application/x-www-form-urlencoded	기본값. 모든 문자들은 서버로 보내지기 전에 인코딩 된다.
multipart/form-data	모든 문자를 인코딩하지 않는다.  주로 <form>요소가 파일, 이미지 등을 서버로 전송할 때 사용.
text/plain	공백문자(space)는 "+"로 변환. 나머지 문자는 모두 인코딩 x

참고 : https://kyoe.tistory.com/103, http://tcpschool.com/html-tag-attrs/form-enctype

 

request 보냈으므로 views.py도 수정할 것.

 

 

detail.html (수정하기)

{% extends 'base.html' %}
{% block content %}
    <h1>{{ blog.title }}</h1>
    <p>{{ blog.pub_date }}</p>
    <p>{{ blog.body }}</p>
        {% if blog.image %}
        <p><img src="{{blog.image.url}}" alt="" /></p>
        {% endif %}
    <a href="{% url 'blog:update' blog.id %}">수정하기</a>
    <a href="{% url 'home' %}">돌아가기</a>
    <a href="{% url 'blog:delete' blog.id %}">Delete Post</a>
{% endblock %}

=> image 업로드, DB에 저장까지 완료.

 

 

 

 

- 결론 -

'media 설정' means 'making 업로드 기능'

HTML파일에서 <input type="file"> 태그로 파일을 받을 수 있게 만들어도 장고에서 media 처리를 해주지 않으면 파일을 받을 수 x

=> 사용자로부터 (이미지)파일을 받아오기 위해서 media 처리를 해주는 것.