Django 实现图片上传至数据库并在前端展示

环境准备与依赖安装

Django 处理图片字段需要依赖 Pillow 库。在开始编码前，需先安装该模块：

pip install pillow

模型定义

在应用的 models.py 中，定义包含图片字段的模型。使用 ImageField 存储图片路径，并指定上传目录及默认图片：

class Image(models.Model):
  pic_name=models.CharField('图片',max_length=40)
  pic_path=models.ImageField(upload_to="pic_folder/",default='pic_folder/None/no_image.pig')

执行迁移命令后，Django 会在站点目录下生成 media/pic_folder 目录用于存储上传的图片。

视图与模板配置

在 views.py 中编写视图函数，从数据库获取图片对象并传递给前端模板：

def upload_pic(request):
  pic=Image.objects.all()
  return render(request,'blog/image.html',{'pic':pic})

Settings 配置

在 Django 的 settings.py 中，需完成两项关键配置：

1. 模板路径：确保 TEMPLATES 配置中包含 django.template.context_processors.media，以便模板能访问媒体变量。
2. 媒体路径：定义 MEDIA_URL 和 MEDIA_ROOT，指定图片存储的根目录：

1、添加media模板
TEMPLATES = [
 {
  'BACKEND': 'django.template.backends.django.DjangoTemplates',
  'DIRS': [os.path.join(os.path.dirname(__file__), 'templates'),os.path.join(os.path.dirname(__file__), 'static'), ],

  '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',
   ],
  },
 },
]

2、设置media的路径
MEDIA_URL='media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media').replace('\\','/')

路由配置

在 urls.py 中，将视图函数映射到 URL，并配置静态媒体文件的访问路径：

from django.conf.urls.static import static
 from django.conf import settings

 urlpatterns = [
  url(r'^pic$', views.upload_pic, name='upload_pic')
 ]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

操作流程与验证

1. 登录 Django Admin 后台。
2. 通过后台界面上传图片。
3. 访问配置的前端页面，检查图片是否正常显示。

以上就是 Django 将图片上传数据库后在前端显式的详细内容，更多关于 Django 图片处理与前端展示的资料请关注本站其它相关文章！