Django中为数据字段动态加载示例文件的实现问询

1. 后端配置（views.py + urls.py） #

步骤1：配置示例文件存储路径 #

确保示例文件（example1.xlsx等）放在MEDIA_ROOT/samples/目录下，先在settings.py中确认媒体文件配置：

# settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

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

步骤2：编写示例文件接口视图 #

在views.py中新增视图，用于返回指定示例文件的信息：

# views.py
from django.http import JsonResponse
from django.conf import settings
import os

def get_sample_file(request, sample_id):
    # 映射示例ID到对应文件名
    sample_map = {
        '1': 'example1.xlsx',
        '2': 'example2.xlsx',
        '3': 'example3.xlsx',
        '4': 'example4.xlsx'
    }
    filename = sample_map.get(sample_id)
    if not filename:
        return JsonResponse({'success': False, 'message': '无效的示例ID'})
    
    file_path = os.path.join(settings.MEDIA_ROOT, 'samples', filename)
    if not os.path.exists(file_path):
        return JsonResponse({'success': False, 'message': '示例文件不存在'})
    
    # 生成可访问的文件URL
    file_url = f"{settings.MEDIA_URL}samples/{filename}"
    return JsonResponse({
        'success': True,
        'filename': filename,
        'file_url': file_url
    })

步骤3：配置路由 #

在项目或应用的urls.py中添加接口路由：

# urls.py
from django.conf import settings
from django.conf.urls.static import static
from . import views

urlpatterns = [
    # 其他已有路由...
    path('sample/<str:sample_id>/', views.get_sample_file, name='get_sample_file'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2. 前端模板实现 #

步骤1：HTML结构 #

保留原上传框，添加示例按钮和隐藏输入框（用于存储示例文件URL）：

<!-- Django模板文件 -->
<div class="upload-container">
    <input type="file" id="file-upload" name="upload_file">
    <!-- 用于自定义显示选中文件名的容器 -->
    <span class="file-display" style="margin-left: 10px;"></span>
</div>

<div class="sample-buttons">
    <button data-sample-id="1">#1 加载示例1</button>
    <button data-sample-id="2">#2 加载示例2</button>
    <button data-sample-id="3">#3 加载示例3</button>
    <button data-sample-id="4">#4 加载示例4</button>
</div>

<!-- 隐藏输入框，存储示例文件URL，提交表单时传给后端 -->
<input type="hidden" id="sample-file-url" name="sample_file_url">

步骤2：JavaScript逻辑 #

处理按钮点击事件，调用后端接口并更新上传框显示：

<script>
document.querySelectorAll('.sample-buttons button').forEach(button => {
    button.addEventListener('click', async function() {
        const sampleId = this.getAttribute('data-sample-id');
        try {
            const response = await fetch(`/sample/${sampleId}/`);
            const data = await response.json();
            
            if (data.success) {
                // 更新自定义文件名显示
                const fileDisplay = document.querySelector('.file-display');
                fileDisplay.textContent = `已选择：${data.filename}`;
                
                // 存储示例文件URL到隐藏输入框
                document.getElementById('sample-file-url').value = data.file_url;
                
                // 可选：隐藏原生上传框的默认文本（通过样式实现）
                document.getElementById('file-upload').style.opacity = 0;
            } else {
                alert(data.message);
            }
        } catch (error) {
            alert('加载示例文件失败，请重试');
        }
    });
});
</script>

3. 表单提交后的后端处理 #

在处理表单提交的视图中，区分用户上传文件和示例文件：

# views.py 处理表单提交的视图
def handle_upload(request):
    if request.method == 'POST':
        # 优先处理用户上传的文件
        uploaded_file = request.FILES.get('upload_file')
        if uploaded_file:
            # 执行用户上传文件的处理逻辑
            pass
        else:
            # 处理示例文件
            sample_file_url = request.POST.get('sample_file_url')
            if sample_file_url:
                # 从媒体目录读取示例文件
                relative_path = sample_file_url.replace(settings.MEDIA_URL, '')
                file_path = os.path.join(settings.MEDIA_ROOT, relative_path)
                with open(file_path, 'rb') as f:
                    # 读取文件内容进行后续处理
                    pass
    # 其他响应逻辑...

关键说明 #

• 原生<input type="file">受浏览器安全限制无法直接设置文件路径，因此采用自定义显示区域替换默认的"No file chosen"文本，同时用隐藏输入框存储示例文件URL供后端读取。
• 示例文件必须放在MEDIA_ROOT目录下，确保Django可通过MEDIA_URL合法访问，避免路径安全风险。
• 后端需做文件存在性校验，拦截无效请求。

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