Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)

简介: web应用实战:导入文件解析到DB,上传图片【2月更文挑战第25天】

导入文件

目标:导入部门清单excel,解析excel数据存储到数据库。

1.准备要导入的excel文件

image.gif 编辑

2.编写模板HTML

<div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                    批量上传
                </div>
                <div class="panel-body">
                    <form method="post" enctype="multipart/form-data" action="/dept/multi/">
                        {% csrf_token %}
                        <div class="form-group">
                            <input type="file" name="exc">
                        </div>
                        <input type="submit" value="上传" class="btn btn-info btn-sm">
                    </form>
                </div>
            </div>

image.gif

3.编写模型

from django.db import models
class Department(models.Model):
    name = models.CharField(verbose_name='部门名称', max_length=32)
    def __str__(self):
        return self.name

image.gif

4. 编写视图函数

导入逻辑

1.根据标签定义的 name 获取文件对象

2.对象传递给openpyxl,由openpyxl读取文件的内容。from openpyxl import load_workbook:解析excel库。

3.根据sheet遍历循环获取每一行数据

4.入库

def dept_multi(request):
    """ 批量删除(Excel文件)"""
    from openpyxl import load_workbook
    # 1.获取用户上传的文件对象
    file_object = request.FILES.get("exc")
    # 2.对象传递给openpyxl,由openpyxl读取文件的内容
    wb = load_workbook(file_object)
    sheet = wb.worksheets[0]
    # 3.循环获取每一行数据
    for row in sheet.iter_rows(min_row=2):
        text = row[0].value
        exists = models.Department.objects.filter(name=text).exists()
        if not exists:
            models.Department.objects.create(name=text)
    return redirect('/dept/list/')

image.gif

5.配置路由

在 settings.py中添加

urlpatterns = [
    path('dept/multi/', dept.dept_multi),
]

image.gif

6.系统演示

image.gif 编辑

上传图片

城市列表功能模块实战为例,演示上传图片和查询图片。

1.启用Media

启用media是可以让文件自动保存到我们配置的位置。

urls.py中进行配置:

from django.urls import path, re_path
from django.views.static import serve
from django.conf import settings
urlpatterns = [
    re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
]

image.gif

settings.py中进行配置:

import os
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = "/media/"

image.gif

2.编写模板HTML

city_list.html

{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/city/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建城市
            </a>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                城市列表
            </div>
            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Logo</th>
                    <th>名称</th>
                    <th>人口</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>
                            <img src="/media/{{ obj.img }}" style="height: 80px;">
                        </td>
                        <td>{{ obj.name }}</td>
                        <td>{{ obj.count }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

image.gif

upload_form.html

{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"> {{ title }} </h3>
            </div>
            <div class="panel-body">
                <form method="post" enctype="multipart/form-data" novalidate >
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="form-group">
                            <label>{{ field.label }}</label>
                            {{ field }}
                            <span style="color: red;">{{ field.errors.0 }}</span>
                        </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary">提 交</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

image.gif

3.编写模型

from django.db import models
class City(models.Model):
    """ 城市 """
    name = models.CharField(verbose_name="名称", max_length=32)
    count = models.IntegerField(verbose_name="人口")
    # 本质上数据库也是CharField,自动保存数据。
    img = models.FileField(verbose_name="Logo", max_length=128, upload_to='city/')

image.gif

注意:编写模型后,执行如下命令,初始化表结构

$ python manage.py makemigrations

$ python manage.py migrate

4.编写视图函数

city_list函数:这里非常简单,直接使用models库查询出所有所有城市然后返回到给模板。

UpModelForm:定义一个上传表单,用于渲染模板页面。

city_add函数

1.如果是GET请求将form表单样式返回给模板。

2.如果是POST请求,1.将文件保存到启用的media的位置,2.将数据写入DB,3.转发给查询city_list查询最新数据并返回到模板。

from django.shortcuts import render, redirect
from ums import models
from ums.utils.bootstrap import BootstrapModelForm
def city_list(request):
    queryset = models.City.objects.all()
    return render(request, 'city_list.html', {'queryset': queryset})
class UpModelForm(BootstrapModelForm):
    # img排除input样式
    bootstrap_exclude_fields = ['img']
    class Meta:
        model = models.City
        fields = "__all__"
def city_add(request):
    title = "新建城市"
    if request.method == "GET":
        form = UpModelForm()
        return render(request, 'upload_form.html', {"form": form, 'title': title})
    form = UpModelForm(data=request.POST, files=request.FILES)
    if form.is_valid():
        # 对于文件:自动保存;
        # 字段 + 上传路径写入到数据库
        form.save()
        return redirect("/city/list/")
    return render(request, 'upload_form.html', {"form": form, 'title': title})

image.gif

5.配置路由

from django.urls import path, re_path
from django.views.static import serve
from django.conf import settings
from ums.views import city
urlpatterns = [
    re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
    # 城市列表
    path('city/list/', city.city_list),
    path('city/add/', city.city_add),
]

image.gif

6.系统演示

新增城市

image.gif 编辑

城市列表查询

image.gif 编辑

如果需要完整代码可以评论区给我留言!

如果本文对你有帮助,记得点赞+关注,你的支持是我最大的动力!


相关文章
|
2月前
|
监控 NoSQL 网络协议
Django 实时通信实战:WebSocket 与 ASGI 全解析(上)
WebSocket 是一种全双工通信协议,支持实时数据传输,适用于聊天、协作、监控等场景。ASGI 是异步 Web 标准,配合 Uvicorn 服务器和 Django Channels,可实现 Django 的 WebSocket 功能,提升实时应用性能。
129 0
|
28天前
|
缓存 监控 中间件
Django中间件自定义开发指南:从原理到实战的深度解析
Django中间件是Web应用的“交通警察”,在请求与响应过程中进行全局处理,适用于身份验证、日志记录、性能监控等功能。本文详解中间件的工作原理、开发步骤及实战案例,帮助开发者掌握自定义中间件的构建方法,提升Django应用的可维护性与扩展性。
131 0
|
2月前
|
人工智能 开发工具 数据库
Django实战:Python代码规范指南
PEP 8 是 Python 官方代码风格指南,提升代码可读性与团队协作效率。本文详解命名规范、注释写法、常用工具(如 Black、flake8)、编程实践与代码优化技巧,助力写出规范、易维护的 Python 代码。
133 7
|
1月前
|
缓存 NoSQL 数据库
Django缓存机制详解:从配置到实战应用
本文全面解析Django缓存技术,涵盖配置方法与六大缓存后端,结合实战场景演示四种典型应用方式,帮助开发者提升Web应用性能,应对高并发挑战。
44 0
|
1月前
|
存储 缓存 数据库
Django模型开发全解析:字段、元数据与继承的实战指南
Django模型是业务逻辑与数据库的核心桥梁,本文详解模型开发三大核心:字段类型选择、元数据配置与继承模式应用,涵盖实战技巧与常见问题解决方案,助你构建高效可维护的数据模型。
63 0
|
2月前
|
缓存 NoSQL API
Django缓存机制详解:从配置到实战应用
本文介绍了 Django 缓存机制的基础知识与实战应用,涵盖缓存概念、Redis 安装配置、缓存策略及 API 使用,并通过 RBAC 权限系统演示缓存的读写与删除操作,助力提升 Web 应用性能。
81 0
|
2月前
|
缓存 JSON 应用服务中间件
Django实时通信实战:WebSocket与ASGI全解析(下)
本文将使用 Django Channels 构建一个多用户实时聊天室,并详细介绍如何在生产环境中部署 WebSocket 应用。
110 0
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1131 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。

热门文章

最新文章