Django 照片瀏覽和上傳網(wǎng)頁

******************重點(diǎn)是思路*********

本文介紹如何使用 Django 框架和 Python 語言編寫一個(gè)簡單的照片瀏覽和上傳網(wǎng)頁。我們的網(wǎng)頁可以實(shí)現(xiàn)以下功能：

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

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

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中配置存儲路徑。例如，我們可以將存儲路徑設(shè)置為項(xiàng)目根目錄下的一個(gè)名為media的文件夾：

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

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

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

jango是什么

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

今天，我們將會以一個(gè)示例為例，來演示關(guān)于圖像上傳的操作。

項(xiàng)目創(chuàng)建

前提條件

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

扎實(shí)的 Python 和 Django 基礎(chǔ)知識，包括但不限于 Django 的模型、視圖、模板以及表單等方面的理解。
一個(gè)代碼編輯器，比如 Visual Studio Code，它能夠提供豐富的編輯功能和便捷的開發(fā)環(huán)境，有助于你更高效地編寫和調(diào)試代碼。

環(huán)境配置

首先，要在新項(xiàng)目中執(zhí)行以下命令：

pip install django

安裝完成后，我們現(xiàn)在開始執(zhí)行以下步驟，以創(chuàng)建一個(gè)名為 xiaoYuGallery 的 Django 項(xiàng)目：

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

admin端圖像處理

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

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

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

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

import os

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

為了確保用戶在開發(fā)過程中能夠上傳圖片，我們需要在項(xiàng)目級的urls.py文件中進(jìn)行相應(yīng)設(shè)置，以便進(jìn)行測試。

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框架中的模型類來定義一個(gè)名為Image的模型。在這個(gè)模型中，我們定義了兩個(gè)字段：

title：這是一個(gè)CharField字段，用于存儲圖片的標(biāo)題。max_length參數(shù)指定了該字段的最大長度為20個(gè)字符。
photo：這是一個(gè)ImageField字段，用于存儲圖片文件。upload_to參數(shù)指定了上傳圖片時(shí)的存儲路徑，這里設(shè)置為'pics'，意味著上傳的圖片將會保存在項(xiàng)目中的'pics'文件夾下。

這個(gè)模型將允許我們在數(shù)據(jù)庫中存儲圖片的標(biāo)題和相應(yīng)的圖片文件，并且可以通過Django的ORM（對象關(guān)系映射）進(jìn)行管理和操作。

from django.db import models

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

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

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

from django.contrib import admin
from .models import Image

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

admin.site.register(Image, imageAdmin)

在views.py ，我們添加這段代碼，它是一個(gè)Django視圖函數(shù)，用于處理用戶請求并返回相應(yīng)的網(wǎng)頁內(nèi)容。

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)

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

在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

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

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)

顯示圖片

執(zhí)行一下進(jìn)行數(shù)據(jù)庫遷移的命令：

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

py manage.py migrate：Django 會讀取之前生成的遷移文件，并根據(jù)這些文件中的指令，在數(shù)據(jù)庫中執(zhí)行相應(yīng)的更改，例如創(chuàng)建新的表、修改表結(jié)構(gòu)或添加新的字段等。

py manage.py createsuperuser

當(dāng)你運(yùn)行這個(gè)命令時(shí)，Django 會提示你輸入超級用戶的用戶名、電子郵件地址和密碼。輸入完畢后，Django 將會在數(shù)據(jù)庫中創(chuàng)建一個(gè)新的超級用戶，并使用你提供的信息設(shè)置其登錄憑據(jù)。這個(gè)超級用戶可以用來登錄到 Django 的后臺管理界面，進(jìn)行網(wǎng)站管理和維護(hù)工作。

啟動服務(wù)，一旦服務(wù)器啟動，你就可以在瀏覽器中訪問你的 Django 項(xiàng)目，并在開發(fā)環(huán)境中進(jìn)行測試和調(diào)試。默認(rèn)情況下，開發(fā)服務(wù)器會監(jiān)聽本地主機(jī)的 8000 端口，你可以通過在瀏覽器中輸入 http://127.0.0.1:8000/ 或 http://localhost:8000/ 來訪問你的網(wǎng)站。

py manage.py runserver

看下管理后臺效果，點(diǎn)擊add也會進(jìn)行添加圖片。

用戶圖片上傳

在這個(gè)示例中，我們將創(chuàng)建一個(gè)名為 forms.py 的文件，并在其中定義一個(gè)用于處理上傳表單的類，將其與我們的 Image 模型相關(guān)聯(lián)。這樣做可以確保我們的代碼結(jié)構(gòu)清晰，易于維護(hù)和擴(kuò)展。

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

from django import forms
from .models import Image

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

在您的項(xiàng)目的templates文件夾中，您可以添加一個(gè)名為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，這一行創(chuàng)建一個(gè) `ImageUploadForm` 的實(shí)例，通過將 `request.POST` 和 `request.FILES` 傳遞給它來填充表單數(shù)據(jù)。`request.POST` 包含用戶通過 POST 方法提交的表單數(shù)據(jù)，而 `request.FILES` 包含用戶上傳的文件數(shù)據(jù)。
        if form.is_valid(): #這一行檢查表單數(shù)據(jù)是否有效，即是否通過了表單的驗(yàn)證。
            form.save()#如果表單數(shù)據(jù)有效，這一行將保存表單數(shù)據(jù)到數(shù)據(jù)庫中。
            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') 
]

我們來看下效果：

首頁效果：

結(jié)語

通過本文，我們深入了解了 Django 框架的一些基本概念和使用方法，以及如何利用 Django 構(gòu)建一個(gè)簡單的圖像上傳應(yīng)用程序。從項(xiàng)目創(chuàng)建到環(huán)境配置，再到 admin 端圖像處理和用戶圖片上傳，我們逐步學(xué)習(xí)了如何利用 Django 提供的功能快速搭建 Web 應(yīng)用。無論是對于初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，掌握 Django 都能夠幫助我們更高效地開發(fā)出高質(zhì)量的 Web 應(yīng)用。希望本文能夠?yàn)槟峁┮恍椭蛦l(fā)，讓您更加深入地了解 Django，并能夠在實(shí)際項(xiàng)目中運(yùn)用所學(xué)知識。

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

ue-quill-editor是個(gè)較為輕量級富文本，但是在使用vue-quill-editor我們會發(fā)現(xiàn)，vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片比較大的話，富文本的內(nèi)容就會很大，而且也不方便我們處理。所以這里需要來重新定義圖片上傳功能，當(dāng)我們選擇圖片后將圖片上傳服務(wù)器，服務(wù)器返回相應(yīng)的圖片鏈接，前端將圖片鏈接插入到富文本的指定光標(biāo)上位置，在提交富文本的內(nèi)容的時(shí)候圖片只是以圖片地址提交。

樣式重寫

我們重新寫個(gè)簡單的樣式，用來上傳圖片是使用，默認(rèn)隱藏（uploadimg=false），當(dāng)我們點(diǎn)擊上傳圖片圖標(biāo)時(shí)將其顯示，所以這里我們要做的就是新增HTML和CSS并且重寫toolbar中image的方法。

事件重定義

下面要做的就是重新定義image方法，在toolbar中的headers中我們可以給對應(yīng)的標(biāo)簽重新定義方法，這里我們要該的是image，當(dāng)我們點(diǎn)擊時(shí)顯示我們新增的樣式，也就是把uploadimg=false改成uploadimg=true，所以我們直接在headers中禁用quill內(nèi)部上傳圖片，然后寫個(gè)點(diǎn)擊事件觸發(fā)新事件。

#data
toolbar:{
 container: toolbarOptions,
 handlers: {
 'image': function () {
 this.quill.format('image', false); //禁用quill內(nèi)部上傳圖片
 }
 }
 }
#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
 }
}

思路：我們需要做的是點(diǎn)擊“上傳到服務(wù)器”按鈕將我們選擇的文件發(fā)送到后臺，后臺拿到我們的文件后進(jìn)行存儲并返回我們前端文件路徑，前端拿到文件的存儲路徑，再把路徑賦給光標(biāo)所在的img標(biāo)簽中這樣就可以在文中中看到我們上傳的圖片了。

前臺文件發(fā)送

首先要獲取到上傳的文件，這里我們用的是input標(biāo)簽，屬性為file，所以這里我們沒法用v-model來獲取數(shù)據(jù)，這時(shí)我們需要用到$refs來定位獲取，我們給input一個(gè)ref屬性，然后通過let filename=this.$refs.imgfile.files[0]獲取到文件對象。

注意事項(xiàng)：我們從前端發(fā)送文件給后端時(shí)是個(gè)文件，所以我們需要創(chuàng)建一個(gè)FormData對象來處理文件。

# 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">上傳到服務(wù)器</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)
 })
},

后臺接受文件并處理

model創(chuàng)建

我們需要創(chuàng)建一個(gè)文件的模型，這里用來存儲文件的路徑，并指定文件存儲位置，我定義了一個(gè)簡單的模型，只有文件名和文件路徑，通過參數(shù)upload_to指定上傳文件的保存目錄，具體的操作可以參考：Django實(shí)戰(zhàn)009：文件上傳實(shí)現(xiàn)過程詳解

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'

路由創(chuàng)建

我們需要給前臺一個(gè)指定的路由來找到視圖，我將upload指向了views.uploadfile，也就是uploadfile方法。

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),
]

視圖創(chuàng)建

現(xiàn)在我們需要一個(gè)視圖（uploadfile）來接受前臺發(fā)送的數(shù)據(jù)，通過 request.FILES.get('img')來獲取文件對象，拿到文件名然后去數(shù)據(jù)庫中查找該對象是否存在，如果存在我們直接返回該對象的路徑，如果沒有我們就新增并返回文件路徑，這里我返回了一個(gè)code表示處理成功，返回一個(gè)url則是圖片的文件路徑。

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)
注意事項(xiàng)：這里我們用的是filter而不是get，get是獲取唯一值，當(dāng)沒有時(shí)就會報(bào)錯(cuò)，如果要用就用突然try包裹起來使用，用filter則是使用了查詢集，沒有則返回空。

前臺接受返回?cái)?shù)據(jù)

首先我們先接受后臺返回到的數(shù)據(jù)，通過code來判斷數(shù)據(jù)是否處理成，如果失敗則彈出“圖片插入失敗”提示，如果成功我們就將圖片插入到光標(biāo)所在位置即可。

在線咨詢

上一篇：Spring Boot快速開發(fā)企業(yè)級Admin管理后
下一篇：父親，你究竟是誰？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商