Django多文件上传报错：'NoneType'无'name'属性 求解决方案

一、修复AttributeError错误 #

错误根源是代码尝试访问NoneType对象的name属性，说明你未正确获取上传的文件对象，通常是多文件上传的处理逻辑或前端表单设置有误。

1. 修正前端表单 #

确保表单添加enctype="multipart/form-data"（文件上传必需），同时文件输入框开启multiple属性：

<form method="post" action="/add_property" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="photos" multiple>
    <button type="submit">提交</button>
</form>

2. 修正视图函数代码 #

Django中多文件上传需用request.FILES.getlist('字段名')获取文件列表，而非单个get方法，循环处理时先判断文件有效性：

from django.core.files.storage import FileSystemStorage
from django.shortcuts import render

def add_property(request):
    if request.method == 'POST':
        fs = FileSystemStorage()
        # 获取所有上传的文件列表
        photos = request.FILES.getlist('photos')
        saved_files = []
        for photo in photos:
            # 跳过空文件，避免None触发错误
            if photo:
                filename = fs.save(photo.name, photo)
                saved_files.append(fs.url(filename))
        # 将保存的文件URL传给模板用于回显
        return render(request, 'add_property.html', {'saved_files': saved_files})
    return render(request, 'add_property.html')

二、实现多文件回显 #

1. 上传成功后的文件回显 #

在模板中遍历后端传递的saved_files列表，渲染图片或文件链接：

{% if saved_files %}
<h3>已上传文件：</h3>
<div class="file-preview">
    {% for file_url in saved_files %}
        {% if file_url|lower contains '.jpg' or file_url|lower contains '.png' or file_url|lower contains '.jpeg' %}
            <img src="{{ file_url }}" alt="上传图片" style="width: 200px; margin: 10px;">
        {% else %}
            <a href="{{ file_url }}" target="_blank">{{ file_url.split('/')|last }}</a>
        {% endif %}
    {% endfor %}
</div>
{% endif %}

2. 前端选中文件时的即时预览 #

添加JavaScript实现选中文件后立即预览，无需提交：

<input type="file" name="photos" multiple onchange="previewFiles(this)">
<div id="file-preview-container"></div>

<script>
function previewFiles(input) {
    const container = document.getElementById('file-preview-container');
    container.innerHTML = ''; // 清空之前的预览内容
    const files = input.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onload = function(e) {
            if (file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.width = '200px';
                img.style.margin = '10px';
                container.appendChild(img);
            } else {
                const p = document.createElement('p');
                p.textContent = `文件：${file.name}`;
                container.appendChild(p);
            }
        };
        reader.readAsDataURL(file);
    }
}
</script>

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