[멋쟁이사저처럼10기] Django 블로그 만들기(파일 업로드)

사용자 업로드 기능-media

media : 사용자가 업로드한 데이터, 사용자에 의한 데이터

 

settings.py

STATIC_URL = '/static/'

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

MEDIA_URL = '/media/'

urls.py

from django.conf import settings
from django.conf.urls.static import static

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

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
#위와 같음

 

우리가 업로드할 media 파일을 models.py에 적어줘야한다.

from django.db import models

class Blog(models.Model):
    title = models.CharField(max_length=200)  
    body = models.TextField()
    date = models.DateTimeField(auto_now_add=True)
    photo = models.ImageField(blank=True, null=True, upload_to='blog_photo')
    
    def __str__(self):
        return self.title

베이스 폴더(프로젝트 폴더) 하위에 'media' > 'blog_photo' 파일을 만들어준다.

 

media 파일을 업로드할 수 있는 모델을 새로 생성했으므로 변경사항이 담긴 파일을 만들어준 후,

python manage.py makemigrations

 

이 파일을 데이터 베이스에 반영해주면 된다.

python manage.py migrate

 

 

 

index.html

<a href="{% url 'modelform' %}">django ModelForm을 이용한 새 글 작성</a>

 

form_create.html ( enctype 지정 )

enctype : form data가 서버로 제출될 때 해당 데이터의 인코딩 방법을 명시한다. 이 속성은 form의 http method 속성값이 post인 경우에만 사용할 수 있다.

multipart/form-data :  form 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용한다(바이너리 데이터)

<h1>Django form을 이용한 </h1>
<form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <table>
        <!--table 태그가 감싸진 것처럼 form이 보임-->
        {{ form.as_table }}
    </table>
    <input type='submit' value="새 글 생성하기">
</form>

 

forms.py

class BlogModelForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = '__all__'

 

views.py

def modelform(request):
    if request.method == 'POST' or request.method == "FILES":
        #입력 내용을 DB에 저장
        form = BlogModelForm(request.POST, request.FILES)       
        #데이터 형식에 맞지 않는 유효하지 않은 값
        if form.is_valid():
            form.save()
            return redirect('home')
    else:
    #입력을 받을 수 있는 html을 갖다 주기
        form = BlogModelForm()
    return render(request, 'form_create.html', {'form':form})

 

하지만 이렇게하면 생성된 글에 들어갔을 때 이미지 파일을 볼 수 없다. 

따라서 detail.html 코드에서 아래 작업을 해주면, 우리가 올린 이미지를 생성된 글 url에서 확인할 수 있다.

{% if blog_detail.photo %}
    {{ blog_detail.photo.url }}
    <img src = "{{ blog_detail.photo.url }}" alt="" height="200">
{% endif %}

이미지 파일 올라감