Django實現圖片上傳並前端頁面顯示
阿新 • • 發佈：2020-06-26
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.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:
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路徑訪問看下能不能直接載入圖片
