Django如何拆分上传文件扩展名并在不同HTML元素中对应展示

所有修改按文件顺序操作即可：

1. 修正模型文件（你原文件名拼写错误，应为models.py） #

import os
from django.db import models

class Upload(models.Model):
    document = models.FileField(upload_to='documents')
    
    # 新增方法获取文件扩展名
    def get_file_ext(self):
        # 提取扩展名并转小写、去掉点
        return os.path.splitext(self.document.name)[1].lower().strip('.')

修改后无需执行数据库迁移，模型方法不影响表结构。

2. 修改settings.py配置（项目根目录的settings.py） #

在文件末尾添加以下两行，配置上传文件存储规则：

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

然后在项目根目录手动新建一个名为media的文件夹，用于存储上传的文件。

3. 修改项目路由urls.py #

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
# 导入你写的Home视图
from your_app_name.views import Home # 把your_app_name改成你自己的app名称

urlpatterns = [
    path('admin/', admin.site.urls),
    path('drive/', Home, name='drive'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. 修改views.py #

from django.shortcuts import render, redirect
from .models import Upload

def Home(request): 
    if request.method == 'POST': 
        if len(request.FILES) == 0:
            return redirect("/drive")
        else:
            photo = request.FILES['doc'] 
            Upload.objects.create(document = photo) 
            return redirect("/drive")
   
    if request.method == "GET": 
        photo = Upload.objects.all() 
        context = {
             'phone': photo 
             }   
    # 你原来的模板名写错了，改成你实际用的index.html
    return render(request, 'index.html', context)

5. 完整index.html代码 #

<!DOCTYPE html>
<html>
<head>
    <title>文件展示</title>
</head>
<body>
    <!-- 上传文件表单 -->
    <form method="post" enctype="multipart/form-data" action="/drive/">
        {% csrf_token %}
        <input type="file" name="doc" accept=".jpg,.pdf,.docx,.mp4" required>
        <button type="submit">上传文件</button>
    </form>
    <hr>
    <!-- 已上传文件展示 -->
    {% for i in phone %}
        <div style="margin: 20px 0;">
            <p>文件地址：{{i.document.url}}</p>
            {% with ext=i.get_file_ext %}
                {% if ext == 'jpg' or ext == 'jpeg' or ext == 'png' %}
                    <!-- 图片类型用img标签展示 -->
                    <img src="{{i.document.url}}" alt="预览图" width="200" style="display: block;">
                {% elif ext == 'pdf' %}
                    <!-- pdf用embed标签内嵌展示 -->
                    <embed src="{{i.document.url}}" type="application/pdf" width="600" height="400">
                {% elif ext == 'docx' %}
                    <!-- docx无法直接内嵌，提供下载链接 -->
                    <a href="{{i.document.url}}" download>点击下载docx文件</a>
                {% elif ext == 'mp4' %}
                    <!-- 视频用video标签播放 -->
                    <video controls width="400">
                        <source src="{{i.document.url}}" type="video/mp4">
                        您的浏览器不支持视频播放
                    </video>
                {% else %}
                    <p>不支持的文件格式，<a href="{{i.document.url}}" download>点击下载</a></p>
                {% endif %}
            {% endwith %}
        </div>
    {% empty %}
        <p>暂无上传的文件</p>
    {% endfor %}
</body>
</html>

内容的提问来源于stack exchange，提问作者AMRIT SHAHI