Django框架中圖片上傳功能實現-Python教學-PHP中文網

Django框架中圖片上傳功能實現

PHPz

發布： 2023-06-17 10:18:07

原創

1607 人瀏覽過

隨著網路與社群媒體的普及，圖片上傳功能已成為了Web開發中不可或缺的一部分。 Django框架提供了豐富的庫，使得在Django中實現圖片上傳功能變得簡單且有效率。本文將介紹如何使用Django框架中的模型、表單和視圖來實現圖片上傳功能。

模型

在Django中，模型是ORM（Object-Relational Mapping）的主要部分。 ORM透過將資料庫中的資料對應到Django中的Python物件來簡化資料庫操作。在本文中，我們需要為圖片上傳功能建立一個模型。

首先，將以下程式碼加入models.py檔案中：

from django.db import models

class Image(models.Model):
    name = models.CharField(max_length=200)
    image = models.ImageField(upload_to='images/')

登入後複製

在這個模型中，我們定義了一個名為Image的模型。這個模型擁有兩個欄位：name和image。 name欄位是一個CharField，它將設定為最大長度為200的字串。 ImageField欄位則允許使用者上傳一個映像，並且在伺服器上保存映像檔的路徑將以images/作為前綴。這個路徑是相對於MEDIA_ROOT設定的路徑的。注意，為了使用ImageField字段，您需要安裝並設定Pillow庫。

表單

一旦我們有了一個模型，我們需要建立一個表單來允許使用者上傳圖像。在Django中，表單通常會對應到一個視圖函數中。以下是表單程式碼：

from django import forms
from .models import Image

class ImageForm(forms.ModelForm):

    class Meta:
        model = Image
        fields = ['name', 'image']

登入後複製

在這個表單中，我們使用了ImageForm類，它繼承自Django中的ModelForm。 ModelForm是一個特殊的表單類，它可以自動產生表單欄位和驗證規則。 Meta類別中定義了使用的模型和需要顯示的欄位清單。

視圖

現在我們已經有了一個模型和表單，我們需要建立一個視圖來處理使用者上傳的圖像。在本文中，我們將使用CreateView視圖，它是一個通用視圖，用於建立模型。

from django.views.generic.edit import CreateView
from django.urls import reverse_lazy
from .models import Image
from .forms import ImageForm

class ImageCreate(CreateView):
    model = Image
    form_class = ImageForm
    success_url = reverse_lazy('image-list')

登入後複製

在這個視圖中，我們使用了CreateView類，並指定相關的模型和表單類別。 success_url屬性指定了建立成功後應該重定向到的位址。

現在，我們還需要加入一些路由程式碼。在urls.py檔案中加入以下程式碼：

from django.urls import path
from .views import ImageCreate
from .models import Image

urlpatterns = [
    path('image/create/', ImageCreate.as_view(), name='image-create'),
]

登入後複製

這將建立一個位址為/image/create/的路由，並綁定到我們上面定義的視圖。

範本

最後，我們需要建立一個範本來顯示表單和上傳的圖片。我們將在templates目錄下建立一個名為image_create.html的模板。模板內容如下：

{% extends 'base.html' %}

{% block content %}
<h1>Upload Image</h1>
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form.as_p }}
  <input type="submit" value="Upload">
</form>
{% endblock %}

登入後複製

在這個模板中，我們繼承了Django預設的base.html模板，並在content區塊中顯示表單。