Django实现图片上传并前端页面显示
时间:2022-07-25
本文章向大家介绍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路径访问看下能不能直接加载图片
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法