快捷導(dǎo)航

Django+simpleui實(shí)現(xiàn)文件上傳預(yù)覽功能(詳細(xì)過(guò)程)

更新時(shí)間：2025年02月10日 10:09:34 作者：Summer@123

該文章詳細(xì)介紹了如何在Django框架中實(shí)現(xiàn)文件上傳、預(yù)覽和下載功能,并使用SimpleUI美化Django后臺(tái)界面,通過(guò)創(chuàng)建模型、表單、視圖和配置URL,實(shí)現(xiàn)了文件的存儲(chǔ)和管理,同時(shí),文章還提到了配置媒體文件、創(chuàng)建模板以及在生產(chǎn)環(huán)境中的部署注意事項(xiàng),感興趣的朋友一起看看吧

1. 創(chuàng)建 Django 項(xiàng)目和應(yīng)用
2. 配置 MySQL 數(shù)據(jù)庫(kù)
3. 創(chuàng)建模型
4. 創(chuàng)建表單
5. 創(chuàng)建視圖
6. 配置 URL
7. 配置媒體文件
8. 創(chuàng)建模板
9. 配置 SimpleUI
10. 運(yùn)行服務(wù)器并測(cè)試
11. 部署
總結(jié)

在 Django 中，文件通常不會(huì)直接存儲(chǔ)到 MySQL 數(shù)據(jù)庫(kù)中，而是存儲(chǔ)在文件系統(tǒng)或云存儲(chǔ)中，數(shù)據(jù)庫(kù)中只存儲(chǔ)文件的路徑或元數(shù)據(jù)。

1. 創(chuàng)建 Django 項(xiàng)目和應(yīng)用

如果還沒(méi)有項(xiàng)目和應(yīng)用，先創(chuàng)建一個(gè)：

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

2. 配置 MySQL 數(shù)據(jù)庫(kù)

在 settings.py 中配置 MySQL 數(shù)據(jù)庫(kù)連接：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mydatabase',  # 數(shù)據(jù)庫(kù)名稱
        'USER': 'root',        # 數(shù)據(jù)庫(kù)用戶名
        'PASSWORD': 'password',# 數(shù)據(jù)庫(kù)密碼
        'HOST': 'localhost',   # 數(shù)據(jù)庫(kù)主機(jī)
        'PORT': '3306',        # 數(shù)據(jù)庫(kù)端口
    }
}

確保已安裝 MySQL 客戶端庫(kù)：

pip install mysqlclient

3. 創(chuàng)建模型

在 myapp/models.py 中創(chuàng)建一個(gè)模型來(lái)存儲(chǔ)文件信息：

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="上傳時(shí)間")
    def __str__(self):
        return self.name
    class Meta:
        verbose_name = "上傳文件"
        verbose_name_plural = "上傳文件"

4. 創(chuàng)建表單

在 myapp/forms.py 中創(chuàng)建一個(gè)表單來(lái)處理文件上傳：

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

5. 創(chuàng)建視圖

在 myapp/views.py 中創(chuàng)建視圖來(lái)處理文件的上傳、預(yù)覽和下載：

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 中包含應(yīng)用的 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 中配置媒體文件的存儲(chǔ)路徑：

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. 創(chuàng)建模板

在 myapp/templates/ 目錄下創(chuàng)建以下模板文件：

upload.html（文件上傳頁(yè)面）

<!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（上傳成功頁(yè)面）

<!DOCTYPE html>
<html>
<head>
    <title>Upload Success</title>
</head>
<body>
    <h1>File Uploaded Successfully</h1>
    <a href="{% url 'upload_file' %}" rel="external nofollow" >Upload another file</a>
</body>
</html>

preview.html（文件預(yù)覽頁(yè)面）

<!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 %}" rel="external nofollow" >Download</a>
</body>
</html>

9. 配置 SimpleUI

在 settings.py 中安裝并配置 SimpleUI：

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

SimpleUI 會(huì)自動(dòng)美化 Django 后臺(tái)界面，你可以在 settings.py 中進(jìn)一步配置 SimpleUI 的主題和其他選項(xiàng)。

10. 運(yùn)行服務(wù)器并測(cè)試

運(yùn)行 Django 開(kāi)發(fā)服務(wù)器：

python manage.py runserver

訪問(wèn) http://127.0.0.1:8000/myapp/upload/ 進(jìn)行文件上傳、預(yù)覽和下載的測(cè)試。

11. 部署

在生產(chǎn)環(huán)境中，確保配置好靜態(tài)文件和媒體文件的處理方式，并考慮使用云存儲(chǔ)服務(wù)（如 AWS S3）來(lái)存儲(chǔ)上傳的文件。

總結(jié)

通過(guò)以上步驟，可以實(shí)現(xiàn)管理員上傳文件并將文件信息存儲(chǔ)到 MySQL 數(shù)據(jù)庫(kù)，同時(shí)支持前端預(yù)覽和下載的功能。SimpleUI 用于美化 Django 后臺(tái)界面，提升用戶體驗(yàn)。

到此這篇關(guān)于Django+simpleui實(shí)現(xiàn)文件上傳預(yù)覽功能的文章就介紹到這了,更多相關(guān)Django simpleui文件上傳預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: