Django+simpleui实现文件上传预览功能

news2025/2/9 11:59:01

在 Django 中,文件通常不会直接存储到 MySQL 数据库中,而是存储在文件系统或云存储中,数据库中只存储文件的路径或元数据。


1. 创建 Django 项目和应用

如果还没有项目和应用,先创建一个:

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

2. 配置 MySQL 数据库

settings.py 中配置 MySQL 数据库连接:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mydatabase',  # 数据库名称
        'USER': 'root',        # 数据库用户名
        'PASSWORD': 'password',# 数据库密码
        'HOST': 'localhost',   # 数据库主机
        'PORT': '3306',        # 数据库端口
    }
}

确保已安装 MySQL 客户端库:

pip install mysqlclient

3. 创建模型

myapp/models.py 中创建一个模型来存储文件信息:

from django.db import models

class UploadedFile(models.Model):
    name = models.CharField(max_length=255, verbose_name="文件名称")
    file = models.FileField(upload_to='uploads/', verbose_name="文件")
    uploaded_at = models.DateTimeField(auto_now_add=True, verbose_name="上传时间")

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = "上传文件"
        verbose_name_plural = "上传文件"

4. 创建表单

myapp/forms.py 中创建一个表单来处理文件上传:

from django import forms
from .models import UploadedFile

class UploadFileForm(forms.ModelForm):
    class Meta:
        model = UploadedFile
        fields = ['name', 'file']

5. 创建视图

myapp/views.py 中创建视图来处理文件的上传、预览和下载:

from django.shortcuts import render, get_object_or_404
from django.http import HttpResponse
from .models import UploadedFile
from .forms import UploadFileForm
import os

def upload_file(request):
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return render(request, 'upload_success.html')
    else:
        form = UploadFileForm()
    return render(request, 'upload.html', {'form': form})

def preview_file(request, file_id):
    file = get_object_or_404(UploadedFile, id=file_id)
    return render(request, 'preview.html', {'file': file})

def download_file(request, file_id):
    file = get_object_or_404(UploadedFile, id=file_id)
    response = HttpResponse(file.file, content_type='application/force-download')
    response['Content-Disposition'] = f'attachment; filename={os.path.basename(file.file.name)}'
    return response

6. 配置 URL

myapp/urls.py 中配置 URL 路由:

from django.urls import path
from . import views

urlpatterns = [
    path('upload/', views.upload_file, name='upload_file'),
    path('preview/<int:file_id>/', views.preview_file, name='preview_file'),
    path('download/<int:file_id>/', views.download_file, name='download_file'),
]

myproject/urls.py 中包含应用的 URL:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('myapp/', include('myapp.urls')),
]

7. 配置媒体文件

settings.py 中配置媒体文件的存储路径:

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

myproject/urls.py 中添加媒体文件的 URL 配置:

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

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

8. 创建模板

myapp/templates/ 目录下创建以下模板文件:

upload.html(文件上传页面)
<!DOCTYPE html>
<html>
<head>
    <title>Upload File</title>
</head>
<body>
    <h1>Upload File</h1>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Upload</button>
    </form>
</body>
</html>
upload_success.html(上传成功页面)
<!DOCTYPE html>
<html>
<head>
    <title>Upload Success</title>
</head>
<body>
    <h1>File Uploaded Successfully</h1>
    <a href="{% url 'upload_file' %}">Upload another file</a>
</body>
</html>
preview.html(文件预览页面)
<!DOCTYPE html>
<html>
<head>
    <title>Preview File</title>
</head>
<body>
    <h1>{{ file.name }}</h1>
    <p>Uploaded at: {{ file.uploaded_at }}</p>
    <a href="{% url 'download_file' file.id %}">Download</a>
</body>
</html>

9. 配置 SimpleUI

settings.py 中安装并配置 SimpleUI:

INSTALLED_APPS = [
    ...
    'simpleui',
    'myapp',
    ...
]

SimpleUI 会自动美化 Django 后台界面,你可以在 settings.py 中进一步配置 SimpleUI 的主题和其他选项。


10. 运行服务器并测试

运行 Django 开发服务器:

python manage.py runserver

访问 http://127.0.0.1:8000/myapp/upload/ 进行文件上传、预览和下载的测试。


11. 部署

在生产环境中,确保配置好静态文件和媒体文件的处理方式,并考虑使用云存储服务(如 AWS S3)来存储上传的文件。


总结

通过以上步骤,可以实现管理员上传文件并将文件信息存储到 MySQL 数据库,同时支持前端预览和下载的功能。SimpleUI 用于美化 Django 后台界面,提升用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2295259.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

寒假2.7

题解 web&#xff1a;[HCTF 2018]WarmUp 打开是张表情包 看一下源代码 访问source.php&#xff0c;得到完整代码 代码审计 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["source">"source.p…

无限使用Cursor

原理&#xff1a;运行程序获得15天的免费试用期&#xff0c;重新运行程序重置试用期&#xff0c;实现无限使用。免费的pro账号&#xff0c;一个月有250的高级模型提问次数。 前提&#xff1a;已安装cursor cursor-vip工具&#xff1a;https://cursor.jeter.eu.org?p95d60efe…

unity碰撞的监测和监听

1.创建一个地面 2.去资源商店下载一个火焰素材 3.把procedural fire导入到自己的项目包管理器中 4.给magic fire 0 挂在碰撞组件Rigidbody , Sphere Collider 5.创建脚本test 并挂在magic fire 0 脚本代码 using System.Collections; using System.Collections.Generic; usi…

企业FTP替代升级,实现传输大文件提升100倍!

随着信息技术的飞速发展&#xff0c;网络安全环境也变得越来越复杂。在这种背景下&#xff0c;传统的FTP&#xff08;文件传输协议&#xff09;已经很难满足现代企业对文件传输的需求了。FTP虽然用起来简单&#xff0c;但它的局限性和安全漏洞让它在面对高效、安全的数据交换时…

python基础入门:3.3序列通用操作

Python序列操作终极指南&#xff1a;解锁数据处理的核心技能 # 快速导航 sequence_types ["列表", "元组", "字符串", "字节序列"]一、核心操作三位一体 1. 索引与切片体系 # 通用索引规则 data ["A", "B", &…

Linux | 自动化构建 —— make / Makefile

文章目录 自动化构建-make/Makefile一、make 工具概述二、Makefile 基本结构三、 Makefile和make的基本使用3.1最基本的gcc编译&#xff1a;3.2make执行Makefile文件3.3.PHONY伪目标 四、Makefile拓展4.1直接根据文件名编写Makefile4.2变量的使用4.3Makefile的适度扩展语法&…

【个人开发】macbook m1 Lora微调qwen大模型

本项目参考网上各类教程整理而成&#xff0c;为个人学习记录。 项目github源码地址&#xff1a;Lora微调大模型 项目中微调模型为&#xff1a;qwen/Qwen1.5-4B-Chat。 去年新发布的Qwen/Qwen2.5-3B-Instruct同样也适用。 微调步骤 step0: 环境准备 conda create --name fin…

电脑开机提示按f1原因分析及终极解决方法来了

经常有网友问到一个问题&#xff0c;我电脑开机后提示按f1怎么解决&#xff1f;不管理是台式电脑&#xff0c;还是笔记本&#xff0c;都有可能会遇到开机需要按F1&#xff0c;才能进入系统的问题&#xff0c;引起这个问题的原因比较多&#xff0c;今天小编在这里给大家列举了比…

2025华为OD机试真题最新题库 (B+C+D+E卷) + 在线OJ在线刷题使用说明(C++、Java、Python合集)(正在更新E卷,目前已收录581道)

2024年8月份&#xff0c;华为已经开始使用E卷题库&#xff0c;题目和往期一样&#xff0c;旧题加新题的组合&#xff0c;有题目第一时间更新&#xff0c;大家可以跟着继续学习&#xff0c;目前使用复用题较多&#xff0c;可在OJ上直接找到对应的E卷学习&#xff0c;可以放心学习…

Qt+海康虚拟相机的调试

做机器视觉项目的时候&#xff0c;在没有相机或需要把现场采集的图片在本地跑一下做测试时&#xff0c;可以使用海康的虚拟相机调试。以下是设置步骤&#xff1a; 1.安装好海康MVS软件&#xff0c;在菜单栏->工具选择虚拟相机工具&#xff0c;如下图&#xff1a; 2.打开虚拟…

《Origin画百图》之边际分布曲线图

《Origin画百图》第六集——边际分布曲线图 入门操作可看《30秒&#xff0c;带你入门Origin》 边际分布曲线图&#xff0c;其中包含散点图形&#xff0c;而在图的边际有着分布曲线图。在比较数据以查看多个变量之间是否存在关系时非常有用。 1.数据准备&#xff1a;为多列XY数…

如何提升自己的能力

提高自身能力是一个长期且综合的过程&#xff0c;需要从多个方面进行努力和持续的学习&#xff0c;以下是一些有效的方法&#xff1a; 明确目标与规划 确定目标&#xff1a;首先要明确自己想要提高哪些方面的能力&#xff0c;例如沟通能力、领导力、专业技能等&#xff0c;并根…

Vim跳转文件及文件行结束符EOL

跳转文件 gf 从当前窗口打开那个文件的内容&#xff0c;操作方式&#xff1a;让光标停在文件名上&#xff0c;输入gf。 Ctrlo 从打开的文件返回之前的窗口 Ctrlwf 可以在分割的窗口打开跳转的文件&#xff0c;不过在我的实验不是次次都成功。 统一行尾格式 文本文件里存放的…

Termux安装ssh实现电脑ssh

Termux下载 点击下载 在 Termux 中安装并使用 SSH&#xff0c;按照以下步骤操作&#xff1a; 1. 更新软件包列表 pkg update && pkg upgrade2. 安装 OpenSSH pkg install openssh3. 设置 SSH 密码&#xff08;必须&#xff0c;否则无法使用 SSH 服务器&#xff09…

DeepSeek大模型介绍、本地化部署与使用!【AI大模型】

一、DeepSeek 是什么&#xff1f; 1.技术定位 专注大模型与AGI研究&#xff0c;开发高性能基座模型&#xff08;如 DeepSeek LLM 系列&#xff09;&#xff0c;支持长文本、多模态、代码生成等复杂任务。 提供开源模型&#xff08;如 DeepSeek-MoE、DeepSeek-V2&#xff09;…

Axios 的原理

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Gitlab中如何进行仓库迁移

需求&#xff1a;之前有一个自己维护的新仓库A&#xff0c;现在需要将这个仓库提交并覆盖另一个旧的仓库B&#xff0c;需要保留A中所有的commit信息。 1.方法一&#xff1a;将原有仓库A导出后再导入到新的仓库B中 适用场景&#xff1a;新的仓库B是一个待建仓库&#xff0c;相当…

Centos挂载镜像制作本地yum源,并补装图形界面

内网环境centos7.9安装图形页面内网环境制作本地yum源 上传镜像到服务器目录 创建目录并挂载镜像 #创建目录 cd /mnt/ mkdir iso#挂载 mount -o loop ./CentOS-7-x86_64-DVD-2009.iso ./iso #前面镜像所在目录&#xff0c;后面所挂载得目录#检查 [rootlocalhost mnt]# df -h…

Thread类以及常见方法

Thread类是JVM用来管理线程的一个类&#xff0c;每个线程都有一个唯一的Thread对象与之关联。 多一个线程&#xff0c;就多一条执行流&#xff0c;每个执行流也要一个对象来描述&#xff0c;而Thread类的对象就是用来描述一个线程的执行流&#xff0c;JVM 会将这些 Thread 对象…

【蓝桥杯—单片机】第十一届省赛真题代码题解题笔记 | 省赛 | 真题 | 代码题 | 刷题 | 笔记

第十一届省赛真题代码部分 前言赛题代码思路笔记竞赛板配置内部振荡器频率设定键盘工作模式跳线扩展方式跳线 建立模板明确设计要求和初始状态显示功能部分数据界面第一部分第二部分第三部分调试时发现的问题 参数设置界面第一部分第二部分和第四部分第三部分和第五部分 按键功…