django에서 ImageField 사용 상세 정보

ImageField 사용 노트

오늘 숙제를 작성한 주문 시스템을 보완하는 것은 주로 모든 메뉴에 그림을 추가하고 보기 좋게 하는 것이다. 그러나 이 작은 수요가 나에게 하루의 시간을 들일 줄은 생각하지 못했다. 기록해 보니 지식을 늘린 셈이다.

사용 프로세스

1. 설정 파일 구성

MEDIA_ROOT는 이미지를 업로드하는 루트 디렉토리를 나타냅니다. MEDIA_URL은 파일에 접근할 때 URL의 접두사를 나타냅니다.

#  
MEDIA_ROOT = join('media')
#  url
MEDIA_URL = '/IMG/'

2. 모델에 ImageField 속성 추가

up_load는 반드시 설정해야 합니다. 마지막 그림이 MEDIA에 저장된다는 것을 의미합니다_ROOT/up_load (사실은 당신이 부여한 이름) 이 폴더에 있습니다.

class Menu(models.Model):
  """
   
  """
  ID = models.BigAutoField(primary_key=True,editable=False)
  lastEditTime = models.DateTimeField(auto_now_add=True)
  merchantID = models.ForeignKey(Usr, verbose_name=" ", on_delete=models.CASCADE,to_field='ID')
  itemName = models.CharField(max_length=20,verbose_name=" ")
  itemText = models.TextField(verbose_name=" ")
  price = models.FloatField(verbose_name=" ")
  ################# up_load 
  picture = models.ImageField(verbose_name=' ',null=True,upload_to='img/')
  class Meta:
    db_table = "Menu"
    verbose_name = " "
    ordering=['-lastEditTime']

3. Form 양식 클래스

이 프로젝트는django가 가지고 있는Form 폼 클래스를 사용하여 데이터를 전달합니다.

class MerchantDish(forms.Form):
  """
   
  """
  itemName = forms.CharField(max_length=20,label=" ")
  itemText = forms.CharField(max_length=300,label=" ")
  price = forms.FloatField(label=" ")
  picture = forms.ImageField(label=' ')

4.html 템플릿 파일(메뉴 추가)

반드시 추가해야 합니다:enctype="multipart/form-data".

<form action="updateDish_post/" method="post" enctype="multipart/form-data"> 
  {% csrf_token %} {{form.as_p}}
  <button type="submit"> </button> 
  <button type="button"><a href="/MerchantSystem/DelDish/{{dishID}}/" rel="external nofollow" > </a></button>
</form>

5. 메뉴의 html 템플릿 파일 표시

중요한 것은 src에서 경로의 설정입니다. 두 가지 방법이 있습니다. 건의법은 첫째, 자신이 비교적 안전하다고 느끼고picture가 없어도 틀리지 않습니다.(주의: 그림 표시 크기 조정 가능)
법1:/IMG (당신이 정의한 MEDIA_URL)/{{dish.picture} ---dish는 백엔드에서 전해오는 메뉴,dish를 대표합니다.picture는 당신이 사용하는 이 클래스의 ImageField 속성이 있는 필드를 대표합니다.
법2: {{dish.picture.url}} ImageField는 파일 클래스이기 때문에 세 개의 속성name,path,url에 직접 접근할 수 있습니다.

{% for dish in menu %}
<!-- html -->
<!--  url  -->
<form action="/MerchantSystem/Dish/{{dish.ID}}/" method="post">
  {% csrf_token %}
  <li class="media">
    <div class="media-left media-middle" >
        <img class="media-object" width="150" height="150" src="/IMG/{{dish.picture}}" alt="">
    </div>
    <div class="media-body">
      <h4 class="media-heading">
        <button type='submit' class=" url" title=" ">
         ：{{dish.itemName|default:"Null"}}
        </button>
        <span class="label label-default">
           ：{{dish.price|default:"Null"}}
        </span>

      </h4>
       ：{{dish.itemText|default:"Null"}}
    </div>
  </li>
</form>

{% empty %}

<!-- -->

<p> ..</p>

{% endfor %} {% endblock tableBody %}

6. 경로 정태화

모든 URL에 다음과 같이 설정해야 합니다. URL patterns + static...

from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
  path('', views.base_view, name = "base"),#  
  path('order/<int:dishID>/', views.order_view),#  
  path('order/<int:dishID>/submit/',views.order_submit),#  
  path('pay/<int:orderID>/', views.pay_view),#  
  path('pay/<int:orderID>/submit/',views.pay_submit),# 
  path('order/list/',views.order_list_view),# 
  path('order/confirm/<int:orderID>/',views.order_confirm),# 
  path('order/comment/<int:orderID>/',views.comment),# 
  path('order/comment_post/<int:orderID>/',views.comment_post)# 
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

7. 업로드된 이미지 수정

우선 폼으로 그림을 올리고 유효성을 검사한 후cleaned_데이터의picture 데이터는 업데이트할 대상의picture 속성에 값을 부여하고 마지막으로save하면 됩니다.코드는 다음과 같습니다.

def updateDish_post(request,dishID):
  """
   
  """
  dish_form = MerchantDish(request.POST,request.FILES)
  if dish_form.is_valid() :
    dish = Menu.objects.get(ID = dishID)
    dish.itemName = dish_form.cleaned_data['itemName']
    dish.itemText = dish_form.cleaned_data['itemText']
    dish.price = dish_form.cleaned_data['price']
    dish.picture = dish_form.cleaned_data['picture']
    dish.save()
    # dishChange = dish_form.clean()    
    return redirect('/MerchantSystem/')
  elif dish_form.errors is not None:
    print(dish_form.errors)
    return HttpResponse(str(dish_form.errors))

8. 기본 그림 설정

이 단계에서 나는 오랫동안 자료를 조사했지만 모두 안 된다. 모델에 직접 있으면 안 될 것 같다.py 파일에default를 설정하면 저는 마지막에 포기할 것 같습니다. 하지만 저는 운에 따라 시험해 보았습니다. 원리를 모르지만 여기에 두겠습니다. 여러분에게 도움이 되었으면 합니다.
방법은 그림을 표시하는 html 템플릿의 src에 default를 쓰는 것입니다. 코드는 다음과 같습니다.
dish는 백엔드에서 전송된 매개 변수입니다. default는 기본 그림이 있는 위치를 가리킵니다.

    <div class="media-left media-middle" >
        <!-- {{dish.url|default:"Null"}} -->
        <img class="media-object" width="150" height="150" src="/IMG/{{dish.picture|default:'img/default.jpg'}}" alt="">
    </div>

참고 자료:

ImageField 사용
기본 그림의 값 부여 (방법이 안 될 것 같아)
django에서 Image Field의 사용에 대한 상세한 설명은 여기 있습니다. 더 많은 django Image Field 관련 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!