Django实现图片上传并前端页面显示
2020-06-26 01:47
633 查看
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路径访问看下能不能直接加载图片
相关文章推荐
- spring boot实现上传图片并在页面上显示及遇到的问题小结
- spring boot实现上传图片并在页面上显示
- vue实现的上传图片到数据库并显示到页面功能示例
- django 实现图片上传和显示操作
- JSP页面,实现上传图片即时显示效果
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- laravel实现上传图片并在页面显示
- Django 实现图片上传和显示
- 图片上传显示进度条和预览图的前端实现之预览图篇
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- 利用struts2框架实现当用户上传图片到服务器后,再显示到前台页面中
- spring boot实现上传图片并在页面上显示
- Django 实现图片上传和显示过程详解
- Django入门:实现一个页面同时上传文本和图片,并保存至MySQL
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
- Django1.4上传图片无法在页面显示的问题
- vue实现的上传图片到数据库并显示到页面功能示例
- Django2.0上传图片到media文件夹以及在页面显示上传的图片
- Django篇——关于如何实现在后台管理系统中添加图片然后保存自数据库中,然后在前端界面中显示出来
- laravel实现上传图片并在页面显示的例子