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

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


1. 创建 Django 项目和应用

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

bash 复制代码
django-admin startproject myproject
cd myproject
python manage.py startapp myapp

2. 配置 MySQL 数据库

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

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

确保已安装 MySQL 客户端库:

bash 复制代码
pip install mysqlclient

3. 创建模型

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

python 复制代码
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 中创建一个表单来处理文件上传:

python 复制代码
from django import forms
from .models import UploadedFile

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

5. 创建视图

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

python 复制代码
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 路由:

python 复制代码
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:

python 复制代码
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 中配置媒体文件的存储路径:

python 复制代码
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

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

python 复制代码
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(文件上传页面)
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(上传成功页面)
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(文件预览页面)
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:

python 复制代码
INSTALLED_APPS = [
    ...
    'simpleui',
    'myapp',
    ...
]

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


10. 运行服务器并测试

运行 Django 开发服务器:

bash 复制代码
python manage.py runserver

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


11. 部署

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


总结

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

相关推荐
程序员一诺2 小时前
【Django开发】前后端分离django美多商城项目第15篇:商品搜索,1. Haystack介绍和安装配置【附代码文档】
后端·python·django·框架
小狗很可爱16 小时前
视图函数的应用
django
麦麦大数据19 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
兔子的洋葱圈21 小时前
【django】1-2 django项目的请求处理流程(详细)
后端·python·django
爱摄影的程序猿1 天前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
橘猫云计算机设计2 天前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
靠近彗星2 天前
基于 Vue + Django + MySQL 实现个人博客/CMS系统
前端·vue.js·python·mysql·django
橘猫云计算机设计2 天前
基于ssm的食物营养成分数据分析平台设计与实现(源码+lw+部署文档+讲解),源码可白嫖!
后端·python·信息可视化·数据挖掘·数据分析·django·毕业设计
神奇侠20242 天前
快速入手-基于DRF的过滤、分页、查询配置(十五)
django·django-filter
爱摄影的程序猿2 天前
Python Web 框架 django-vue3-admin快速入门 django后台管理
前端·python·django