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路径访问看下能不能直接加载图片
Django实现图片上传并前端页面显示的更多相关文章
- django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统
图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- Django配置图片上传
本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL 和 MEDIA_ROOT 在 D:\blog ...
- day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息
目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...
- Django图片上传和前端展示
1 - 模型 class Book(models.Model): #定义图书模型 book_name = models.CharField(max_length=100,verbose_name='书 ...
- Django 图片上传、存储与显示
参考博客:http://www.cognize.me/2016/05/09/djangopic 开始之前要先安装python图像处理库:pip install --use-wheel Pillow 一 ...
- 简单的Django实现图片上传，并存储进MySQL数据库 案例——小白
目标:通过网页上传一张图片到Django后台,后台接收并存储进数据库 真是不容易!!这个案例的代码网上太乱,不适合我,自己摸索着写,终于成功了,记录一下,仅供自己参考,有的解释可能不对,自己明白就好, ...
- 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- Django xadmin图片上传与缩略图处理
基本摘要 用python django开发时,个人选中Xadmin后台管理系统框架,因为它*内置功能丰富, 不仅提供了基本的CRUD功能,还内置了丰富的插件功能.包括数据导出.书签.图表.数据添加向导 ...
随机推荐
- burpsuite 关于部分https抓包失败原因
没导入证书 burpsuite生成证书 der格式,名字随便取,一路next firefox浏览器导入 导入,勾选信任证书ok,重启浏览器 还有你要勾选这里,确保所有流量都走你的代理 ps:遇到浏 ...
- jchdl - GSL实例 - DFlipFlop（D触发器）
https://mp.weixin.qq.com/s/7N3avTxTd2ZUnAcKg4w3Ig D触发器对边沿敏感,只有当相应的边沿出现时,才会触发D的值传播到输出Q. 引自:htt ...
- Spring （ 五 ）Spring之数据访问与事务管理
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Spring之数据访问 1.Spring数据访问工程环境搭建 jdbc.properties配置 ...
- Java实现 LeetCode 567 字符串的排列（滑动窗口，处理区间内的字符数量）
567. 字符串的排列 给定两个字符串 s1 和 s2,写一个函数来判断 s2 是否包含 s1 的排列. 换句话说,第一个字符串的排列之一是第二个字符串的子串. 示例1: 输入: s1 = " ...
- Java实现 LeetCode 522 最长特殊序列 II（查找最长的非子序列的长度）
522. 最长特殊序列 II 给定字符串列表,你需要从它们中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列). 子序列可以通过删去字符串中的某些 ...
- Java实现 蓝桥杯VIP 算法训练 采油区域
算法训练 采油区域 时间限制:2.0s 内存限制:512.0MB 提交此题 查看参考代码 采油区域 Siruseri政府决定将石油资源丰富的Navalur省的土地拍卖给私人承包商以建立油井.被拍卖的整 ...
- Java实现 LeetCode 31下一个排列
31. 下一个排列 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许 ...
- Java中map.getOrDefault()方法的使用
Map.getOrDefault(Object key, V defaultValue)方法的作用是: 当Map集合中有这个key时,就使用这个key值: 如果没有就使用默认值defaultV ...
- Spring AOP概念及作用
一:SpringAOP概念 面向切面编程(Aspect Oriented Programming)提高了另一种角度来思考程序的结构,通过预编译方式和运行期间的动态代理实现程序功能的统一维护的一种技术. ...
- tensorflow2.0学习笔记第一章第一节
一.简单的神经网络实现过程 1.1张量的生成 # 创建一个张量 #tf.constant(张量内容,dtpye=数据类型(可选)) import tensorflow as tf import num ...