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

  • 相关阅读:
    CF
    求最长反链 || Dilworth 定理
    APIO 2020 补题记录
    CF vp 记录
    虚树
    LCT 学习
    平衡树
    poly
    关于此博客
    题解 P5021【NOIP2018】 【赛道修建】
  • 原文地址:https://www.cnblogs.com/you-men/p/13193677.html
Copyright © 2020-2023  润新知