Django实现图片上传并前端页面显示

1|0Django实现图片上传和图片显示

开始之前我们先确认环境中已经安装了Pillow,如果没有安装,可以通过pip install Pillow来安装,这个是python的图像处理库

2|0数据库设置

我们创建好项目后先在项目创建一个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',
]
2|1数据库中建立保存图片的表
 
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
2|2修改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')

3|0配置项目逻辑
3|1配置项目视图函数
 
# 项目根路径/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),
]
3|2创建模板

在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>

4|0创建admin后台账号

 
python manage.py createsuperuser
4|1定义admin后台

admin.py

from django.contrib import admin

from app01.models import Userprofile

admin.site.register(Userprofile)
4|2访问admin后台

5|0验证前端图片访问

我们先去数据库表看一下对应的url路径

3333

我们可以先用IP:Port/static/icon路径访问看下能不能直接加载图片


__EOF__

本文作者：一入IT深似海，从此妹子是路人
本文链接：https://www.cnblogs.com/you-men/p/13193677.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   常见-youmen  阅读(6121)  评论(2)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示
SQL AI 助手