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实现图片上传并前端页面显示的更多相关文章

  1. django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统

    图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...

  2. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  3. Django配置图片上传

    本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog ...

  4. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  5. Django图片上传和前端展示

    1 - 模型 class Book(models.Model): #定义图书模型 book_name = models.CharField(max_length=100,verbose_name='书 ...

  6. Django 图片上传、存储与显示

    参考博客:http://www.cognize.me/2016/05/09/djangopic 开始之前要先安装python图像处理库:pip install --use-wheel Pillow 一 ...

  7. 简单的Django实现图片上传，并存储进MySQL数据库 案例——小白

    目标:通过网页上传一张图片到Django后台,后台接收并存储进数据库 真是不容易!!这个案例的代码网上太乱,不适合我,自己摸索着写,终于成功了,记录一下,仅供自己参考,有的解释可能不对,自己明白就好, ...

  8. 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  9. Django xadmin图片上传与缩略图处理

    基本摘要 用python django开发时,个人选中Xadmin后台管理系统框架,因为它*内置功能丰富, 不仅提供了基本的CRUD功能,还内置了丰富的插件功能.包括数据导出.书签.图表.数据添加向导 ...

随机推荐

  1. Verilog缺少一个复合数据类型，如C语言中的结构体

    https://mp.weixin.qq.com/s/_9UsgUQv-MfLe8nS938cfQ Verilog中的数据类型(Data Type)是分散的,缺少一个复合数据类型:把多个wire, r ...

  2. 将字符串按照一行N个内容展示，并保存到txt文档当中

    str='丰东股份的 反倒是 发送到 电风扇发 的说法是 反倒是 aEQWW WERQR ERREW 34R32 ER 32432 32423 432142 234321 134214 32424 3 ...

  3. Java实现 LeetCode 805 数组的均值分割 （DFS+分析题）

    805. 数组的均值分割 给定的整数数组 A ,我们要将 A数组 中的每个元素移动到 B数组 或者 C数组中.(B数组和C数组在开始的时候都为空) 返回true ,当且仅当在我们的完成这样的移动后,可 ...

  4. （Java实现） 最大团问题 部落卫队

    首先介绍下最大团问题: 问题描述:给一个无向图G=(V,E) ,V是顶点集合,E是边集合.然后在这顶点集合中选取几个顶点,这几 个顶点任意两个之间都有边在E中.求最多可以选取的顶点个数.这几个顶点就构 ...

  5. Java实现 蓝桥杯 算法提高 三进制数位和

    算法提高 三进制数位和 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 给定L和R,你需要对于每一个6位三进制数(允许前导零),计算其每一个数位上的数字和,设其在十进制下为S. 一个 ...

  6. Java实现蓝桥杯算法提高12-2扑克排序

    扑克牌排序 问题描述 扑克牌排序:构造扑克牌数组,对扑克牌进行排序. 排序原则如下:数字从小到大是2-10.J.Q.K和A,花色从小到大是方块(diamond).梅花(club).红桃(heart). ...

  7. Java实现 LeetCode 22 括号生成

    22. 括号生成 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", &quo ...

  8. java实现第五届蓝桥杯六角幻方

    六角幻方 里面的*在编写的时候会自动编译成线,这里就用代码的格式把题目弄过来 把 1 2 3 ... 19 共19个整数排列成六角形状,如下: * * * * * * * * * * * * * * ...

  9. 从源码研究如何不重启Springboot项目实现redis配置动态切换

    上一篇Websocket的续篇暂时还没有动手写,这篇算是插播吧.今天讲讲不重启项目动态切换redis服务. 背景 多个项目或微服务场景下,各个项目都需要配置redis数据源.但是,每当运维搞事时(修改 ...

  10. Java基础（九）

    一.总述 多线程程序在较低的层次上扩展了多任务的概念:一个程序同时执行多个任务.通常,每一个任务称为一个线程,它是线程控制的简称.可以同时运行一个以上线程的程序称为多线程程序. 多进程与多线程的区别: ...