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

本文介绍使用Django实现图片上传及展示的方法。包括安装Pillow库、数据库设置、静态文件配置、创建模板及视图函数等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在开始之前我们要确认环境中已经安装了Pillow,如果没有安装,可以通过命令pip install Pillow来安装,这个是python的图像处理库。


第一步:数据库设置

首先在项目中创建一个app。例如 python manage.py startapp app1

然后将其加入到settings.py文件中。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',
]

然后再数据库中建立保存图片的表。

class IMG(models.Model):
    img = models.ImageField(upload_to='img')
    name = models.CharField(max_length=20)

这里的upload_to是指定图片存储的文件夹名称,上传文件之后会自动创建

(ps:如何不想用Django自带的数据库,可以在settings.py

文件中修改位自己用的数据库。)

执行命令做数据迁移,在执行迁移文件在数据库中创建表。

python manage.py makemigrations

python manage.py migrate

第二部:修改settings.py文件

只需要在最后的静态文件区加上下面两行代码:

MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')     #设置静态文件路径为主目录下的media文件夹
MEDIA_URL = '/media/'                                                 #url映射

第三部:创建模板

templates文件下创建一个文件(最好是我们的app的名字,以此来把页面按app分开),比如叫app1,然后在app1文件下创建我们的前端页面。

uploading.html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="img">
        <button type="submit">上传</button>
    </form>
</body>
</html>

showing.html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    {% for img in imgs %}
         <img src="{{ img.img.url }}" />
    {% endfor %}
</body>
</html>

第四部:创建视图函数

views.py文件:

from django.shortcuts import render
from app1.models import IMG

def uploadImg(request):
    """
    图片上传
    :param request: 
    :return: 
    """
    if request.method == 'POST':
        new_img = IMG(
            img=request.FILES.get('img'),
            name = request.FILES.get('img').name
        )
        new_img.save()
    return render(request, 'app1/uploading.html')

def showImg(request):
    """
    图片显示
    :param request: 
    :return: 
    """
    imgs = IMG.objects.all()
    content = {
        'imgs':imgs,
    }
    for i in imgs:
        print (i.img.url)
    return render(request,'app1/showing.html',content)

第五步:urls.py的配置:

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from  app1 import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^upload', views.uploadImg),
    url(r'^show', views.showImg),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
# static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  这句话是用来指定和映射静态文件的路径
然后我们就可以实现图片的上传和显示了。



### 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`属性的对象实例,而这个实体内部又包含了指向具体媒体项(即刚刚提到过的头像)链接地址的信息。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值