django 实现图片上传和显示操作

本文档详细介绍了如何在Django 2.0.1和Python 3.6.2环境下实现图片上传和显示的操作。首先介绍了安装必要的库如Pillow和mysqlclient,接着讲解了创建Django工程和app,配置settings.py,以及在models.py中定义图片模型。然后,通过编写views.py、urls.py和模板文件实现图片上传界面和上传功能。最后,展示了如何修改views.py以显示所有上传的图片,并更新urls.py配置静态路径,创建显示图片的模板showImg.html。

版本:

  • django 2.0.1
  • python 3.6.2

准备工作:
  • pip install pillow 安装python图片处理库 pillow
  • pip install mysqlclient 安装mysql驱动包
  • django工程的创建和app的创建
  • 在settings.py文件中加载app
上传操作的实现:
  • 在所建app中修改models.py文件:
class Img(models.Model):
    img_url = models.ImageField(upload_to='img') # upload_to指定图片上传的途径,如果不存在则自动创建
  • 执行以下命令,建立项目与数据库之间的关系
python manage.py makemigrations
python manage.py migrate
  • 修该项目的settings.py文件

    • 加载mysql驱动并连接mysql,并添加图片上传的根目录
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',   # 加载驱动
        'NAME': 'imgs',# 数据库名
        'USER': 'root',# mysql的用户名
        'PASSWORD': '',# mysql的密码
        'HOST': 'localhost'
### Django 文件上传显示图片 #### 创建模型存储图像文件 为了在Django项目中保存展示用户头像,定义了一个`UserProfile`类作为数据库表结构的一部分。此模型中的`avatar`字段使用了`models.ImageField()`来限定只接受特定类型的图形文件,指定了这些文件应被存放在服务器上的哪个目录下。 ```python from django.db import models class UserProfile(models.Model): avatar = models.ImageField(upload_to='avatars/', max_length=255, blank=True, null=True)[^2] ``` #### 构建视图处理文件上传请求 当接收到HTTP POST请求时,该视图会获取客户端提交的数据包内的文件对象,调用辅助函数对其进行进一步的操作;对于GET请求,则简单返回渲染后的HTML页面给浏览器端。 ```python from django.shortcuts import render def upload_file(request): if request.method == 'POST': uploaded_file = request.FILES['file'] handle_uploaded_file(uploaded_file) return render(request, 'upload.html', {'message': '文件上传成功!'}) return render(request, 'upload.html')[^1] ``` 需要注意的是,在实际应用中应当实现具体的`handle_uploaded_file()`方法来进行必要的校验以及持久化操作。 #### 配置URL路由映射关系 为了让Web应用程序能够响应来自用户的访问请求,需设置好相应的路径规则。这里假设有一个名为`saveImage`的方法负责接收带有图片数据的请求将之妥善保管起来。 ```python from django.urls import path from . import views urlpatterns = [ ... path("media/upload/uploadAvatar", views.saveImage), ][^3] ``` #### 展示已上传图片资源 要在前端界面上呈现出之前由用户所递交的照片资料,可以利用模板引擎提供的标签语法完成这一目标。下面给出了一段简单的HTML代码片段用来加载指定位置处的个人肖像照: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Profile</title> </head> <body> <img src="{{ user.profile.avatar.url }}" alt="User Avatar"/> </body> </html> ``` 上述例子假定当前登录状态下关联着一个具有唯一性的`profile`属性的对象实例,而这个实体内部又包含了指向具体媒体项(即刚刚提到过的头像)链接地址的信息。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值