1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Django后端上传图片并通过前端显示

Django后端上传图片并通过前端显示

时间:2021-05-05 17:04:22

相关推荐

Django后端上传图片并通过前端显示

后端上传图片

😑FileField: 上传文件字段

😑ImageField: 继承于FileField,对上传的内容进行校验,确保是有效的图片

第一步 安装pillow这个插件

pip install pillow

第二步 在settings.py中配置如下:

# 设置上传的图片保存的路径MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')MEDIA_URL = '/media/'# 并且,要在settings.py中的TEMPLATES中的'OPTION'中'context_processors'添加如下代码:'django.template.context_processors.media'

第三步,将Storage.py放进相应的APP中,Storage.py中的代码如下:

Storage.py

# -*- coding:utf-8 -*-from django.core.files.storage import FileSystemStoragefrom django.http import HttpResponse​​class ImageStorage(FileSystemStorage):from django.conf import settings​def __init__(self, location=settings.MEDIA_ROOT, base_url=settings.MEDIA_URL):# 初始化super(ImageStorage, self).__init__(location, base_url)​def _save(self, name, content):# 重新文件上传import os, time, hashlib​# 获取文件后缀ext = os.path.splitext(name)[1]​# 文件目录d = os.path.dirname(name)​# 定义文件夹名称fn = hashlib.md5(time.strftime('%Y%m%d%H%M%S').encode('utf-8')).hexdigest() #随机生成文件夹的名字name = os.path.join(d, fn + ext)​# 调用父类方法return super(ImageStorage, self)._save(name, content)

第四步,导入相应的模块:

from django.core.files.storage import FileSystemStoragefrom .Storage import ImageStorage

models.py:

# upload_to表示把图片上传到article/%Y/%m/%d中去,storage表示存储引擎,默认是django.core.files.storage.FileSystemStorage,storage存储引擎等于ImageStorage会将上传的文件自动生成一个文件名cover = models.ImageField(verbose_name='上传图片', upload_to='article/%Y/%m/%d', storage=ImageStorage())

第五步,前端代码中img标签中的src属性中记得拼接上{{ MEDIA_URL }}

<img src="{{ MEDIA_URL }}{{ ne.cover }}" alt="">

第六步,在项目url中还需做如下配置:

# 首先导入相关的模块from django.conf.urls.static import staticfrom django.conf import settings# 然后在urlpatterns后面拼接上如下代码,示例如下:urlpatterns = [] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)​

此时,从后端django后台中上传的图片就可以在前端正常显示了:

上传图片成功后,可以看到在media这个文件夹中随机生成了一个名字

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。