******************重點是思路*********

本文介紹如何使用 Django 框架和 Python 語言編寫一個簡單的照片瀏覽和上傳網頁。我們的網頁可以實現以下功能：

• 顯示所有已上傳的照片的名稱、時間、類別。
• 上傳新照片并填寫照片的名稱、時間、類別。

我們需要定義一個照片模型，用于存儲照片的名稱、時間和類別。

views.py：

from django.shortcuts import render, redirect
from django.core.files.storage import FileSystemStorage
from django.utils import timezone
from .models import Photo

def home(request):
    photos=Photo.objects.all()
    return render(request, 'home.html', {'photos': photos})

def upload(request):
    if request.method=='POST' and request.FILES['photo']:
        photo=request.FILES['photo']
        fs=FileSystemStorage()
        filename=fs.save(photo.name, photo)
        uploaded_file_url=fs.url(filename)
        name=request.POST.get('name')
        category=request.POST.get('category')
        time=timezone.now()
        photo=Photo(name=name, category=category, time=time, file_name=filename)
        photo.save()
        return redirect('home')
    return render(request, 'upload.html')

使用了Django自帶的FileSystemStorage來存儲上傳的照片文件。FileSystemStorage可以指定文件存儲的路徑，我們可以在settings.py中的MEDIA_ROOT中配置存儲路徑。例如，我們可以將存儲路徑設置為項目根目錄下的一個名為media的文件夾：

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

上傳的照片文件就會存儲到項目根目錄下的media文件夾中。在保存照片文件后，我們還需要將照片的名稱、時間、類別存入MySQL數據庫中。優化后的代碼中，我們使用了Django的ORM來操作數據庫。在Photo模型中，我們添加了一個file_name字段來存儲照片文件的名稱。

需要注意的是，為了使得優化后的代碼能夠正確地保存照片文件和數據庫記錄，我們還需要在項目的urls.py中添加一個urlpattern來映射media文件夾中的文件：

jango是什么

Django 是一個流行的 Python Web 開發框架，它提供了一系列工具和庫，用于幫助開發人員構建高效、可擴展的 Web 應用程序。Django 的目標是讓開發者能夠以快速和簡單的方式構建復雜的 Web 應用，通過提供許多預構建的組件和功能，如 ORM（對象關系映射）、表單處理、認證系統、管理界面等，從而降低了開發工作的復雜性。

今天，我們將會以一個示例為例，來演示關于圖像上傳的操作。

項目創建

前提條件

要順利完成本教程，你需要具備以下條件：

1. 扎實的 Python 和 Django 基礎知識，包括但不限于 Django 的模型、視圖、模板以及表單等方面的理解。
2. 一個代碼編輯器，比如 Visual Studio Code，它能夠提供豐富的編輯功能和便捷的開發環境，有助于你更高效地編寫和調試代碼。

環境配置

首先，要在新項目中執行以下命令：

pip install django

安裝完成后，我們現在開始執行以下步驟，以創建一個名為 xiaoYuGallery 的 Django 項目：

django-admin startproject xiaoYuGallery
cd xiaoYuGallery
py manage.py startapp demo

admin端圖像處理

現在，我們需要打開位于項目目錄下的 settings.py 文件，并在已安裝應用程序列表 (INSTALLED_APPS) 中進行注冊，以便將我們的 demo 應用程序納入其中。請參考下面的示例代碼：

INSTALLED_APPS=[
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'demo',  # 這是我們新增的應用程序
]

確保在列表中添加 demo 這一行，并且位于其他 Django 內置應用程序的下方，這樣可以確保我們的應用程序能夠正確加載和運行。

當我們配置Django時，我們必須明確指定媒體文件的URL和存儲位置。這可以通過設置MEDIA_URL和MEDIA_ROOT來完成。因此，在settings.py文件中，我們需要添加以下內容：

import os

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

為了確保用戶在開發過程中能夠上傳圖片，我們需要在項目級的urls.py文件中進行相應設置，以便進行測試。

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static 

urlpatterns=[
    path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

在models.py文件中，使用Django框架中的模型類來定義一個名為Image的模型。在這個模型中，我們定義了兩個字段：

1. title：這是一個CharField字段，用于存儲圖片的標題。max_length參數指定了該字段的最大長度為20個字符。
2. photo：這是一個ImageField字段，用于存儲圖片文件。upload_to參數指定了上傳圖片時的存儲路徑，這里設置為'pics'，意味著上傳的圖片將會保存在項目中的'pics'文件夾下。

這個模型將允許我們在數據庫中存儲圖片的標題和相應的圖片文件，并且可以通過Django的ORM（對象關系映射）進行管理和操作。

from django.db import models

class Image(models.Model):
    title=models.CharField(max_length=20)
    photo=models.ImageField(upload_to='pics')

在admin.py 中我們定義了一個名為imageAdmin的類，它繼承自admin.ModelAdmin。在這個類中，我們可以自定義模型在后臺管理界面中的顯示方式。在這個例子中，我們通過設置list_display屬性，指定了在Image模型的列表頁面中顯示哪些字段。在這里，我們希望顯示圖片的標題和對應的圖片文件。

最后，我們使用admin.site.register()函數將Image模型和imageAdmin類關聯起來，這樣就可以在后臺管理界面中對Image模型進行管理，并且按照我們定義的方式進行顯示。

from django.contrib import admin
from .models import Image

class imageAdmin(admin.ModelAdmin):
    list_display=["title", "photo"]

admin.site.register(Image, imageAdmin)

在views.py ，我們添加這段代碼，它是一個Django視圖函數，用于處理用戶請求并返回相應的網頁內容。

from django.shortcuts import render
from .models import Image

# Create your views here.
def index(request):
    data=Image.objects.all()
    context={
        'data' : data
    }
    return render(request,"display.html", context)

1. def index(request):: 這是一個名為index的視圖函數，它接收一個request對象作為參數，該對象包含了用戶請求的所有信息。
2. data=Image.objects.all(): 這一行代碼通過Image模型的objects管理器調用all()方法，從數據庫中獲取了所有的Image對象，并將它們存儲在名為data的變量中。
3. context={'data': data}: 這行代碼創建了一個字典context，其中鍵為'data'，值為之前獲取的所有Image對象。這個字典將被傳遞給模板，以便在HTML頁面中使用這些數據。
4. return render(request, "display.html", context): 最后一行代碼調用了render函數，它接收了三個參數：request對象、要渲染的HTML模板文件名（在這里是"display.html"），以及要傳遞給模板的上下文數據。該函數將使用指定的模板和上下文數據渲染HTML頁面，并將渲染后的頁面作為HTTP響應返回給用戶的瀏覽器。

在display.html 里面渲染頁面

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Demo Gallery</title>
</head>
<body class="container" style="padding-top: 5%;">
<div class="row">
    {% for x in data %}
    <div class="col-md-4">
        <div class="card mb-4">
            <img src="{{ x.photo.url }}" class="card-img-top" alt="{{ x.title }}">
            <div class="card-body">
                <h5 class="card-title">{{ x.title }}</h5>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

urls.py中配置URLs

1. path('admin/', admin.site.urls),：將 admin 應用的 URL 映射到 Django 自帶的管理頁面。這使得你可以通過 yourdomain.com/admin/ 訪問管理員界面。
2. path('', include('demo.urls'))：將根 URL 映射到名為 demo 的應用程序的 URL 配置。這意味著所有根 URL 請求（例如 yourdomain.com/）將被傳遞給 demo 應用程序的 URL 配置以進一步處理。

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static 

urlpatterns=[
    path('admin/', admin.site.urls),
    path('', include('demo.urls')) # new
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

顯示圖片

執行一下進行數據庫遷移的命令：

py manage.py makemigrations：這個命令告訴 Django 你對模型進行了更改，并且需要將這些更改記錄下來以便在數據庫中進行更新。

py manage.py migrate：Django 會讀取之前生成的遷移文件，并根據這些文件中的指令，在數據庫中執行相應的更改，例如創建新的表、修改表結構或添加新的字段等。

py manage.py createsuperuser

當你運行這個命令時，Django 會提示你輸入超級用戶的用戶名、電子郵件地址和密碼。輸入完畢后，Django 將會在數據庫中創建一個新的超級用戶，并使用你提供的信息設置其登錄憑據。這個超級用戶可以用來登錄到 Django 的后臺管理界面，進行網站管理和維護工作。

啟動服務，一旦服務器啟動，你就可以在瀏覽器中訪問你的 Django 項目，并在開發環境中進行測試和調試。默認情況下，開發服務器會監聽本地主機的 8000 端口，你可以通過在瀏覽器中輸入 http://127.0.0.1:8000/ 或 http://localhost:8000/ 來訪問你的網站。

py manage.py runserver

看下管理后臺效果，點擊add也會進行添加圖片。

用戶圖片上傳

在這個示例中，我們將創建一個名為 forms.py 的文件，并在其中定義一個用于處理上傳表單的類，將其與我們的 Image 模型相關聯。這樣做可以確保我們的代碼結構清晰，易于維護和擴展。

1. class Meta:：這是一個內部類，用于提供關于該表單的元數據。在這個內部類中，我們可以指定與表單相關的元信息。
2. model=Image：在 Meta 類中，這行代碼指定了表單對應的模型是 Image。這意味著表單將基于 Image 模型生成字段。
3. fields=['title', 'photo']：這行代碼指定了表單中應該顯示的字段。在這個例子中，表單中將包含名為 'title' 和 'photo' 的字段，這與 Image 模型中定義的字段相對應。

from django import forms
from .models import Image

class ImageUploadForm(forms.ModelForm):
    class Meta:
        model=Image
        fields=['title', 'photo']

在您的項目的templates文件夾中，您可以添加一個名為upload.html的文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        input[type="file"] {
            margin-bottom: 10px;
        }
        button[type="submit"] {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit"> Upload Image </button>
    </form>
</body>
</html>

在views.py更新下代碼

def uploadView(request):                                      
    if request.method=='POST':
        form=ImageUploadForm(request.POST, request.FILES)#如果請求方法為 POST，這一行創建一個 `ImageUploadForm` 的實例，通過將 `request.POST` 和 `request.FILES` 傳遞給它來填充表單數據。`request.POST` 包含用戶通過 POST 方法提交的表單數據，而 `request.FILES` 包含用戶上傳的文件數據。
        if form.is_valid(): #這一行檢查表單數據是否有效，即是否通過了表單的驗證。
            form.save()#如果表單數據有效，這一行將保存表單數據到數據庫中。
            return redirect('index')
    else:
            form=ImageUploadForm()
    return render(request, 'upload.html', {'form': form})

demo文件中更新下urls.py

from django.urls import path
from .import views

urlpatterns=[
    path('', views.index, name='index'),
    path('upload_image/', views.uploadView, name='upload_image') 
]

我們來看下效果：

首頁效果：

結語

通過本文，我們深入了解了 Django 框架的一些基本概念和使用方法，以及如何利用 Django 構建一個簡單的圖像上傳應用程序。從項目創建到環境配置，再到 admin 端圖像處理和用戶圖片上傳，我們逐步學習了如何利用 Django 提供的功能快速搭建 Web 應用。無論是對于初學者還是有一定經驗的開發者，掌握 Django 都能夠幫助我們更高效地開發出高質量的 Web 應用。希望本文能夠為您提供一些幫助和啟發，讓您更加深入地了解 Django，并能夠在實際項目中運用所學知識。

原文鏈接：https://juejin.cn/post/7367306429055598607

#data
toolbar:{
 container: toolbarOptions,
 handlers: {
 'image': function () {
 this.quill.format('image', false); //禁用quill內部上傳圖片
 }
 }
 }
#computed
quill(){
 let quill=this.$refs.BGEditor.quill
 return quill
}
# mounted
img:{
 var imgup=document.querySelector('.quill-editor .ql-image')
 imgup.onclick=()=>{
 this.uploadimg=!this.uploadimg
 }
}

# HTML
<div class="uploadImg" v-show="uploadimg" >
 <p>圖像屬性</p>
 <input type="file" ref="imgfile">
 <span>支持.jpg .gif .png .bmp.jpeg，大小不超過5M</span></br>
 <button @click="upload">上傳到服務器</button>
</div> 
 
# models
upload(){
 let filename=this.$refs.imgfile.files[0]
 var formData=new FormData()
 formData.append("img",filename)
 this.$axios.post('http://127.0.0.1:8000/upload/',formData)
 .then(response=>{
 console.log(response.data)
 })
},

class File(models.Model):
 name=models.CharField(max_length=100)
 file=models.ImageField(upload_to='image', null=True)
 
 def __str__(self):
 return self.name
 
 class Meta:
 db_table='file'

from django.conf.urls import url
from user import views
 
urlpatterns=[
 # url(r'^login/$',views.login),
 # url(r'^register/$',views.register),
 url(r'^upload/$',views.uploadfile),
]

def uploadfile(request):
 if request.method=="POST":
 fileName=request.FILES.get('img')
 imgname=fileName.name
 if not fileName:
 return HttpResponse('400')
 imgobj=models.File.objects.filter(name=imgname)
 if not imgobj:
 models.File.objects.update_or_create(name=imgname,file=fileName)
 imgurl=imgobj.first().file.url
 else:
 imgurl=imgobj.first().file.url
 info={'code': '200', 'url': imgurl}
 return JsonResponse(info)
注意事項：這里我們用的是filter而不是get，get是獲取唯一值，當沒有時就會報錯，如果要用就用突然try包裹起來使用，用filter則是使用了查詢集，沒有則返回空。