今天完善作業(yè)寫的訂單系統(tǒng)，主要是給每一個菜品增加圖片，看起來美觀一些，但是沒想到這個小小的需求花了我一天時間，記錄下來，算增長知識了。

MEDIA_ROOT代表的是上傳圖片的根目錄，MEDIA_URL代表的是訪問文件時url的前綴。

# 圖片儲存根路徑MEDIA_ROOT = join(’media’)# 圖片訪問urlMEDIA_URL = ’/IMG/’2.model里面增加ImageField屬性

up_load一定要配置，代表你最后的圖片會存儲到MEDIA_ROOT/up_load（實際上是你賦予的名稱）這個文件夾中。

class Menu(models.Model): ''' 餐品數(shù)據(jù)庫 ''' 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 = '餐品數(shù)據(jù)表' ordering=[’-lastEditTime’]3.Form表單類

本項目使用的是django自帶的Form表單類進行數(shù)據(jù)的傳遞。

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='http://www.hdgsjgj.cn/MerchantSystem/DelDish/{{dishID}}/' rel='external nofollow' >刪除</a></button></form>5.顯示菜品的html模板文件

重要的是src中路徑的配置，有兩種方法，建議法一，自己感覺比較安全，就算沒有picture時也不會報錯。（注意：可調(diào)整圖片顯示大小）

法一：/IMG(你自己定義的MEDIA_URL）/{{dish.picture}} ----dish代表后端傳來的菜品，dish.picture代表你使用的這個類中的那個有ImageField屬性的字段；

法二：{{dish.picture.url}} 因為ImageField是文件類，里面有三個屬性name、path、url可以直接訪問。

{% for dish in menu %}<!--將目錄的數(shù)據(jù)展示在html中--><!-- 提交到一個含參數(shù)的url注意后端的接收 --><form action='/MerchantSystem/Dish/{{dish.ID}}/' method='post'> {% csrf_token %} <li class='media'> <div ><img src='https://rkxy.com.cn/IMG/{{dish.picture}}' alt=''> </div> <div class='media-body'> <h4 class='media-heading'><button type=’submit’ >菜名：{{dish.itemName|default:'Null'}}</button><span class='label label-default'> 價格：{{dish.price|default:'Null'}}</span> </h4> 簡介：{{dish.itemText|default:'Null'}} </div> </li></form>{% empty %}<!--若中無數(shù)據(jù)展示如下內(nèi)容--><p>暫無數(shù)據(jù)..</p>{% endfor %} {% endblock tableBody %}6.路徑靜態(tài)化

在所有的url中都要配置如下：urlpatterns + static…

from django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [ path(’’, views.base_view, name = 'base'),# 顧客服務(wù)系統(tǒng) 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),#到達相應(yīng)菜品的評論界面 path(’order/comment_post/<int:orderID>/’,views.comment_post)#提交評論] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)7.修改上傳的圖片

首先用form表單上傳圖片，檢查有效之后，把cleaned_data中的picture數(shù)據(jù)賦值給要更新對象中的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.設(shè)置默認圖片

這個步驟我查了好久的資料，但是都不行，好像不可以直接在model.py文件中設(shè)置default，我最后都快放棄了，但是自己還是憑運氣試出來了，不知道原理，但還是放在這，希望對大家有幫助。方法是在顯示圖片的html模板中的src處寫一個default，代碼如下：dish是后端傳過來的參數(shù)，default指向的是默認圖片所在的位置。

<div ><!-- {{dish.url|default:'Null'}} --><img src='https://rkxy.com.cn/IMG/{{dish.picture|default:’img/default.jpg’}}' alt=''> </div>參考資料：

ImageField的使用

默認圖片的賦值（感覺方法不行）

到此這篇關(guān)于django中ImageField的使用詳解的文章就介紹到這了,更多相關(guān)django ImageField 內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！