后端上传图片
😑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 HttpResponseclass ImageStorage(FileSystemStorage):from django.conf import settingsdef __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这个文件夹中随机生成了一个名字