인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

rladlsrua8님의 프로필 이미지
rladlsrua8

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

django createview에서 다중 이미지 올릴 수 있도록 코드 좀 봐주실수 있을까요??

작성

·

778

0

안녕하세요??
django에 입문한지 얼마되지 않은 사람입니다~
클론 코딩 위주로 듣다가 기초가 부족한것 같아서 파이썬/장고 웹서비스 개발 강의를 수강하게 되었습니다
좋은 강의 항상 감사드립니다!!
 
이전에 짰던 코드는 article을 create하는 page에서 image를 올리는 것인데 image를 1개밖에 못올리도록 되어 있어서요 여러 이미지를 오릴수 있게 코드를 짜고 싶은데 구글링이나 stackoverflow를 봐도 맞게 나오는게 없어서 질문 드려 봅니다 ㅜㅜ
 
createview를 이용하였는데 도저히 제실력으로는 바꿀수가 없어서요ㅜㅜ 
 
도움 좀 부탁드립니다ㅜㅜ
 
models.py
 
from django.contrib.auth.models import User
from django.db import models

# Create your models here.
from projectapp.models import Project


class Article(models.Model):
writer = models.ForeignKey(User, on_delete=models.SET_NULL, related_name='article', null=True)
project = models.ForeignKey(Project, on_delete=models.SET_NULL, related_name='article', null=True)

title = models.CharField(max_length=200, null=False)
image = models.ImageField(upload_to='article/', null=False)
content = models.TextField(null=True)

created_at = models.DateField(auto_now_add=True, null=True)

like = models.IntegerField(default=0)
unlike = models.IntegerField(default=0)
 
views.py
 
from django.contrib.auth.decorators import login_required
from django.shortcuts import render

# Create your views here.
from django.urls import reverse, reverse_lazy
from django.utils.decorators import method_decorator
from django.views.generic import CreateView, DetailView, UpdateView, DeleteView, ListView
from django.views.generic.edit import FormMixin

from articleapp.decorators import article_ownership_required
from articleapp.forms import ArticleCreationForm
from articleapp.models import Article
from commentapp.forms import CommentCreationForm


@method_decorator(login_required, 'get')
@method_decorator(login_required, 'post')
class ArticleCreateView(CreateView):
model = Article
form_class = ArticleCreationForm
template_name = 'articleapp/create.html'

def form_valid(self, form):
temp_article = form.save(commit=False)
temp_article.writer = self.request.user
temp_article.save()
return super().form_valid(form)

def get_success_url(self):
return reverse('articleapp:detail', kwargs={'pk': self.object.pk})
 
forms.py
 
from django.forms import ModelForm
from django import forms

from articleapp.models import Article
from projectapp.models import Project


class ArticleCreationForm(ModelForm):
content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable',
'style': 'height: auto; text-align: left;'}))
project = forms.ModelChoiceField(queryset=Project.objects.all(), required=False)

class Meta:
model = Article
fields = ['title', 'image', 'project', 'content']
 
create.html
 
{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}
<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

<div style="text-align: center; max-width: 500px; margin: 4rem auto">
<div class="mb-4">
<h4>Article Create</h4>
</div>
<form action="{% url 'articleapp:create' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
</form>
</div>

<script>var editor = new MediumEditor('.editable');</script>

{% endblock %}
 
card.html
 
<div>
<img src="{{ article.image.url }}" alt="">
</div>

답변 1

1

이진석님의 프로필 이미지
이진석
지식공유자

장고에서 이미지를 직접 파일 시스템으로 저장하는 로직을 구성하실 수도 있겠구요. Model/ModelForm을 통해서 수행하실 수도 있습니다.

ModelForm을 통해서 수행하실려고 할 때, Article 클래스는 image 필드가 하나이기 때문에 하나의 이미지만 올릴 수 있습니다. 하나의 Article에 대해서 다수의 이미지를 업로드하실려면

그때 이미지의 개수가 한정되어있다면, 그 수 만큼의 이미지 필드를 Article 클래스가 추가하실 수도 있겠구요. 이는 확장성이 떨어지는 방법이긴 합니다만, 가장 간결한 방법이죠.

혹은 Article 모델과 1:N 관계에 있는 별도의 모델 클래스를 두시고 이미지 필드를 지정하시는 방법이 될 수 도 있습니다. 대략 아래와 같은 모델이 될 수 있구요.

class Attachment(models.Model):
    article = models.ForeignKey(Article, on_delete=models.CASCADE)
    photo = models.ImageField()

Attachment 클래스와의 1:N 처리는 View에서 처리해주실 수 있으실 듯 합니다.

rladlsrua8님의 프로필 이미지
rladlsrua8
질문자

감사합니다!!

많은 도움이 됐습니다!!

이진석님의 프로필 이미지
이진석
지식공유자

화이팅입니다~!!! :-)

rladlsrua8님의 프로필 이미지
rladlsrua8

작성한 질문수

질문하기