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路径访问看下能不能直接加载图片

巴特西