网站被iframe,360兼容模式 网站变形,广州住建网站,设计一个小程序需要多少钱写在前面
在Web开发中#xff0c;文件上传和下载是常见的功能之一。
Django 是一位魔法师#x1fa84;#xff0c;为我们提供了 FileField 和 ImageField 等神奇得字段类型#xff0c;以及相应的视图和模板标签#xff0c;使得处理文件变得十分便捷。本文以图片上传作为…写在前面
在Web开发中文件上传和下载是常见的功能之一。
Django 是一位魔法师为我们提供了 FileField 和 ImageField 等神奇得字段类型以及相应的视图和模板标签使得处理文件变得十分便捷。本文以图片上传作为示例向各位小伙伴展示如何使用Django框架构建一个简单的图片上传与下载功能的项目。
完整代码见https://github.com/MaitreChen/django-upload-download-demo 接下来就由笔者手把手带你如何和在Django的舞台上演绎一场简单而精彩的图片上传与下载的戏码 准备工作
创建django项目并创建应用程序
django-admin startproject upload_download_demo
python manage.py startapp demosetting.py添加应用程序
INSTALLED_APPS [xxxdemo,
]
在django项目目录创建media文件夹并在setting.py中进行配置路径
import osMEDIA_ROOT os.path.join(BASE_DIR, media)
MEDIA_URL /media/
需要说明的是在Django项目使用文件上传功能时MEDIA路径是用来存储用户上传的媒体文件例如图片、文档等的位置这是Django处理媒体文件的标准配置方式。
步骤一定义模型类
模型Model是Django中的一个组件用于定义数据的结构和规则以便存储在数据库中。模型描述了数据的种类、字段类型、约束条件等它充当着数据库表的蓝图确保数据的一致性和完整性。
from django.db import models
from os.path import basenameclass Record(models.Model):name models.CharField(max_length100)image models.ImageField(upload_toimages/) # 指定图片文件存储在media/images文件夹内def get_image_name(self):return basename(self.image.name)
需要说明的是这里定义get_image_name()函数是为了便于获取图片文件名以在前端模板显示非常好用~~
然后做一下数据库迁移
python manage.py makemigrations
python manage.py migrate第一条命令会生成数据库迁移文件包含了关于模型变更的描述所以模型如果添加或删除字段的时候就要做迁移第二条命令会应用变更将模型映射到数据库表。 步骤二定义表单
表单的定义是为了在Web应用中收集用户输入的数据然后将其传递给后端处理以创建、更新或查询数据库中的相应记录。 举个栗子表单就像是网页中的小秘书它的任务是接收用户的各种奇思妙想然后把这些信息悄悄地传递给后端大Boss。这样后端Boss就能够以一种魔法般的方式创造、更新或者找到数据库中的相应“秘密档案”了 from django import forms
from .models import Recordclass RecordForm(forms.ModelForm):class Meta:model Recordfields [image]RecordForm继承自forms.ModelForm表示这是一个基于模型的表单在RecordForm内部有一个内嵌的Meta类用于配置一些表单的元数据fields [image] 指定了在表单中包含哪些字段由于我们在上传时只需要选择图片所以我们添加一个image字段即可如果要输入其他字段比如titile那这里也应该相应添加。
步骤三构建视图函数
让我们编写一个能够在前端舞台上展示图像的视图笔者为小伙伴们做了逐行解释好贴心
from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.conf import settings
from urllib.parse import quote
import os
from .forms import RecordForm # 导入图片上传表单
from .models import Record # 导入图片上传模型类# 图片上传
def upload_image(request):# 检查表单是否提交if request.method POST:# 使用提交的数据创建一个表单实例form RecordForm(request.POST, request.FILES)# 检查表单数据是否有效if form.is_valid():# 将表单数据保存到数据库form.save()# 成功提交后重定向到相同页面return redirect(upload_image)else:# 如果是 GET 请求创建一个空表单form RecordForm()# 从数据库中检索所有记录records Record.objects.all()# 使用表单和记录渲染模板这样我们可以在前台获取records的属性值并显示return render(request, upload_image.html, {form: form, records: records})# 图片下载
def download_image(request, filename):# 构建文件路径file_path os.path.join(settings.MEDIA_ROOT, images, filename)# 获取文件扩展名_, file_extension os.path.splitext(filename.lower())# 根据文件扩展名确定内容类型由于我们下载的是图片数据所以添加常见的格式content_type_mapping {.jpg: image/jpeg,.jpeg: image/jpeg,.png: image/png,}# 如果找不到扩展名默认使用 application/octet-streamcontent_type content_type_mapping.get(file_extension, application/octet-stream)# 读取文件内容并创建响应对象with open(file_path, rb) as file:response HttpResponse(file.read(), content_typecontent_type)# 设置 Content-Disposition 修改文件名否则下载时浏览器会给你默认名字比如下载.jpgresponse[Content-Disposition] fattachment; filename{quote(filename)}return response
步骤四构建模板
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleUpload and Download/title
/head
bodydiv idcontentform methodpost enctypemultipart/form-data{% csrf_token %}{{ form.as_p }}button typesubmitUpload Image/button/formtabletheadtrthNumber/ththImage Name/ththAction/th/tr/theadtbody{% for record in records %}trtd{{ forloop.counter }}/tdtd{{ record.get_image_name }}/tdtda href{% url download_image filenamerecord.get_image_name %} downloadDownload/a/tr{% endfor %}/tbody/table
/div/body
/html第一部分form标签中的内容表示图片上传表单。 methodpost 表示使用 POST 方法提交表单enctypemultipart/form-data 表示支持文件上传{% csrf_token %} 添加了一个 CSRF 令牌用于防止跨站请求伪造攻击{{ form.as_p }} 将表单的字段以段落形式呈现使其更易于阅读button是提交按钮用于触发上传操作 第二部分这里笔者使用了table标签以表格形式呈现在前台。 使用table表格列出了每个图片的序号、图片名称和一个用于下载的链接使用 {% for record in records %} 迭代遍历所有记录{% forloop.counter %} 提供了当前迭代的计数不是必要的只是为了前台为每一条记录编个号而已~下载链接使用 {% url download_image filenamerecord.get_image_name %} 来构建下载图片的URLdownload 属性用于提示浏览器下载文件而不是直接打开另外笔者只是为了带大家实现基本的功能就不设置花里胡哨的style了~~ 步骤五配置URL
在应用程序app中添加文件上传与下载的url
#demo/urls.pyfrom django.urls import path
from .views import upload_image, download_imageurlpatterns [path(upload/, upload_image, nameupload_image),path(download/str:filename/, download_image, namedownload_image),
]我们解释一下download部分 download/str:filename/ 代表实际的URL模式。它包含了一个变量 str:filename表示在这个位置匹配一个字符串并将其作为名为 filename 的参数传递给视图函数。例如如果URL为 download/my_image.jpg/那么 my_image.jpg 将被传递给视图函数。namedownload_image 为这个URL模式起个小名以便在Django中的其他地方引用。通过这个名字我们可以在模板或其他地方使用 {% url download_image filenamerecord.get_image_name %} 来生成对应的URL。 不要忘了在django项目添加app的url
# upload_download_demo/urls.pyfrom django.contrib import admin
from django.urls import path, includeurlpatterns [path(admin/, admin.site.urls),path(, include(demo.urls)),
]
终极测试
启动开发服务器的命令
python manage.py runserver
浏览器访问http://127.0.0.1:8000/upload
在Django的奇妙世界我们每个人都是一位魔法师通过巧妙的咒语让用户轻松上传魔法图谱然后在魔法图书馆里畅游尽情下载这些奇幻之书✨
