Django實現圖片上傳並前端頁面顯示


Django實現圖片上傳和圖片顯示


開始之前我們先確認環境中已經安裝了Pillow,如果沒有安裝,可以通過pip install Pillow來安裝,這個是python的圖像處理庫

數據庫設置

我們創建好項目后先在項目創建一個app

python manage.py startapp app01


# 然后將其加入到settings.py文件中
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01',
]
數據庫中建立保存圖片的表
from django.db import models

class Userprofile(models.Model):
    name = models.CharField(max_length=20)
    icon = models.ImageField(upload_to="uploads/%Y/%m/%d",verbose_name="用戶頭像")

    class Meta:
        db_table = 'userprofile'
        verbose_name = '用戶表'
        verbose_name_plural = verbose_name

這里的upload_to是指定圖片存儲的文件夾名稱,上傳文件之后會自動創建

執行命令做數據遷移,在執行遷移文件在數據庫中創建表。

此處我們使用django自帶的數據庫,你也可以自己在settings里面配置

python manage.py makemigrations
python manage.py migrate
修改settings.py

只需要在最后的靜態文件區加上下面兩行代碼

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media'
            ],
        },
    },
]



STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL = '/static/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media')

配置項目邏輯

配置項目視圖函數
# 項目根路徑/urls.py
from django.conf.global_settings import MEDIA_ROOT
from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve

from app01.views import *

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT}),
    path('app01/', include('app01.urls')),
]

# app01/urls.py
from django.conf.global_settings import MEDIA_ROOT
from django.contrib import admin
from django.urls import path, re_path
from django.views.static import serve

from app01.views import index

urlpatterns = [
    path('index',index),
]
創建模板

在templates文件下創建一個文件(最好是我們的app的名字,以此來把頁面按app分開),比如叫app1,然后在app1文件下創建我們的前端頁面。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>aaaaaaa</h1>
<img src={{ MEDIA_URL }}{{ url }} alt="test">
</body>
</html>

創建admin后台賬號

python manage.py createsuperuser
定義admin后台

admin.py

from django.contrib import admin

from app01.models import Userprofile

admin.site.register(Userprofile)
訪問admin后台

驗證前端圖片訪問

我們先去數據庫表看一下對應的url路徑

3333

我們可以先用IP:Port/static/icon路徑訪問看下能不能直接加載圖片


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM