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

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): ''' 餐品數據庫 ''' 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='http://m.cgvv.com.cn/MerchantSystem/DelDish/{{dishID}}/' rel='external nofollow' >刪除</a></button></form>5.顯示菜品的html模板文件

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

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

法二：{{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 ><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 %}<!--若中無數據展示如下內容--><p>暫無數據..</p>{% endfor %} {% endblock tableBody %}6.路徑靜態化

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

from django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [ 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.修改上傳的圖片

首先用form表單上傳圖片，檢查有效之后，把cleaned_data中的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.設置默認圖片

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

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

ImageField的使用

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

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