---

前言

????在現代Web應用中，圖片上傳是一個常見且重要的功能。Django作為強大的Python Web框架，結合Vue.js這樣的現代前端框架，能夠高效地實現這一功能。本文將詳細介紹如何在Django項目中配置圖片上傳的后端處理，并在Vue前端實現圖片的選擇、預覽和上傳功能。

圖片上傳步驟

1. urls 配置

from django.contrib import admin
from django.urls import path,includefrom django.conf import settings
from django.conf.urls.static import staticurlpatterns = [path('admin/', admin.site.urls),path('app/',include('app.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• static 函數用于定義靜態文件的URL模式，它接收兩個參數：
  • 第一個參數是settings.MEDIA_URL，它是一個字符串，表示媒體文件的URL前綴。
  • 第二個參數是settings.MEDIA_ROOT，它是一個字符串，表示媒體文件在服務器上的存儲路徑。

2. settings 配置

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

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

• 這行代碼設置了Django項目中媒體文件的根目錄。os.path.join是一個Python函數，用于連接多個路徑部分，生成一個完整的路徑。
• BASE_DIR通常是一個變量，表示Django項目的根目錄。這個目錄是Django項目中所有其他路徑的基準點。
• 'media'是一個子目錄，用于存放用戶上傳的媒體文件，比如圖片、視頻、文檔等。

2. MEDIA_URL = '/media/'

• 這行代碼定義了媒體文件的URL前綴。當Django處理URL請求時，如果URL以/media/開頭，它就會知道這個請求是指向媒體文件的。

3. models 配置

class ShopModel(models.Model):name = models.CharField(max_length=100)price = models.DecimalField(max_digits=3,decimal_places=2)count = models.IntegerField()info = models.CharField(max_length=200)is_checked = models.BooleanField(default=False)shopimg = models.ImageField(upload_to='imag/',null=True)# 默認狀態參數-------------------------------# 保質期---剩余天數protect = models.IntegerField(null=True)def __str__(self):return self.nameclass Meta():db_table = 'shop'

• models.ImageField：這是 Django 的一個字段類型，用于處理圖像上傳。它繼承自 models.FileField，專門用于存儲圖像文件，比如 JPEG、PNG 等格式。
• upload_to='imag/'：這個參數指定了上傳文件的保存路徑。當用戶上傳圖片時，Django 會將圖片保存在 MEDIA_ROOT 目錄下的 imag 文件夾中。
  • 例如，如果你的 MEDIA_ROOT 設置為 /path/to/media，則圖片將被保存在 /path/to/media/imag/。
• null=True：這個參數允許字段可以存儲空值。也就是說，如果用戶沒有上傳圖片，這個字段可以是 NULL，而不是必須有一個文件。

4. 安裝Pillow

• 在使用ImageField字段的時候，需要提前安裝：pip install Pillow
• Pillow 它提供了豐富的圖像處理功能，使用它就可以完成對圖像的操作了

前端代碼：

<input type="file" accept="image/png" @change="imgChange">

upfile() {?      let formdata = new FormData();?      formdata.append('name',this.shop.name);
?      formdata.append('price',this.shop.price);
?      formdata.append('count',this.shop.count);
?      formdata.append('info',this.shop.info);
?      formdata.append('shopimg',this.shop.shopimg);?      this.$axios.post('http://127.0.0.1:8000/app/shops/',formdata,{
?        headers:{
?          'Content-Type':'multipart/form-data'
?          }
?        }).then((result) => {
?        console.log(result);
?      }).catch((err) => {
?        console.log(err);
?      });
}

FormData：

• FormData 用于創建鍵值對集合和構造包含文件的請求體，這些鍵值對可以被用來發送 HTTP 請求。它特別適用于需要上傳表單數據，包括文件。
• FormData 對象提供了 append 方法來添加鍵值對，并且能夠自動處理文件上傳的邊界和編碼。使用這種方式，開發者可以輕松地將文件作為二進制數據上傳到服務器。
• 使用 Axios 發送 POST 請求，并將 FormData 作為請求體。請求頭內容應該修改為：'Content-Type':'multipart/form-data'
• 由于 FormData 會自動設置 Content-Type 為 multipart/form-data，所以也可以省略

---