Django前端表单ImageField图片上传失败求助（Admin端正常）

Admin后台上传图片功能正常，但前端表单上传图片时无任何反馈，日志也无相关记录，需排查解决。

相关代码与配置 #

views.py #

def class_article_create(request, URLcodenumber):
    print(URLcodenumber)

    if request.method == 'POST':
        model = Article()
        form = ArticleForm(
            request.POST,
            instance=model
        )

        print(request.method)

        new_article = form.save(commit=False)
        new_article.codenumber = Classes.objects.filter(
            codenumber=URLcodenumber
        )[0]
        new_article.pub_date = date.today()

        print(new_article.id)

        if form.is_valid():
            new_article.save()

            return HttpResponseRedirect(f'/class/{URLcodenumber}')

    return render(
        request,
        'blogpage\\create_article.html',
        {
            'clsName': f'Параллель {URLcodenumber}',
            'codenumber': URLcodenumber,
            'form': ArticleForm()
        }
    )

models.py #

class Article(models.Model):
    id = models.UUIDField(
        primary_key=True,
        default=uuid.uuid4,
        editable=False
    )
    headline = models.CharField(
        max_length=50,
        default='Нет заголовка'
    )
    text = models.TextField(
        max_length=600,
    )
    image = models.ImageField(
        upload_to='images/',
        blank=True
    )
    pub_date = models.DateField()
    codenumber = models.ForeignKey(
        'Classes',
        on_delete=models.CASCADE
    )

create_article.html #

{% extends "blogpage\layout\base.html" %}
{% load static %}

{% block title %}
Добавление ответа
{% endblock title %}

{% block nav %}
<div class="classname-div">
    <p class="cls-name" align="center">{{clsName}}</p>
</div>

<a href='{% url "classpage_articles_preview" URLcodenumber=codenumber %}'>
    <button class="btn-to-page">Перейти к ответам</button>
</a>
{% endblock nav %}

{% block content %}
<form method="post" class="model-form" enctype="multipart/form-data">
    {% csrf_token %}

    {{form.headline}}
    {{form.text}}
    {{form.image}}

    <button class="model-form-submit" type="submit">
        Добавить
    </button>
</form>
{% endblock content %}

注：之前表单未添加enctype="multipart/form-data"时，问题依然存在。

settings.py 媒体配置 #

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

urls.py #

from django.contrib import admin
from django.urls import path
from django.urls import re_path

from django.conf import settings
from django.conf.urls.static import static

from help_page.helppage_views import help_page
from start_page import startpage_views
from help_page import helppage_views
from class_page import classpage_views


urlpatterns = [
    path('admin/', admin.site.urls),
    path(
        '',
        startpage_views.start_page,
        name='startpage'
    ),

    path(
        'help/<numpage>/',
        helppage_views.help_page,
        name='helppage'
    ),

    path(
        'class/<URLcodenumber>/',
        classpage_views.class_article_preview,
        name='classpage_articles_preview'
    ),

    path(
        'create/<URLcodenumber>',
        classpage_views.class_article_create,
        name='classpage_articles_create'
    ),

    path(
        'view/<URLcodenumber>/<uuid:uuid>',
        classpage_views.class_article_view,
        name='classpage_article_view'
    ),

    path(
        'createclass',
        classpage_views.create_class,
        name='create_class'
    )
] + static(
    settings.MEDIA_URL,
    document_root=settings.MEDIA_ROOT
)

图片存储目录：proj_dir => media => images

问题排查与解决 #

核心问题1：表单初始化未传入文件数据 #

处理文件上传时，Django表单必须接收request.FILES参数才能获取上传的文件，原代码创建ArticleForm时仅传入request.POST和instance，遗漏了关键的文件数据参数。

核心问题2：表单验证时机错误 #

原代码先执行form.save(commit=False)再调用form.is_valid()，逻辑顺序错误。必须先验证表单有效性，再进行数据处理和保存操作。

可选优化：避免查询结果索引越界 #

原代码中Classes.objects.filter(codenumber=URLcodenumber)[0]若没有匹配结果会抛出异常，建议用.first()替代，提升代码安全性。

修改后的views.py代码 #

def class_article_create(request, URLcodenumber):
    print(URLcodenumber)

    if request.method == 'POST':
        # 传入request.FILES处理文件上传
        form = ArticleForm(request.POST, request.FILES)
        
        print(request.method)

        if form.is_valid():
            new_article = form.save(commit=False)
            # 使用first()避免索引越界
            cls = Classes.objects.filter(codenumber=URLcodenumber).first()
            if cls:
                new_article.codenumber = cls
                new_article.pub_date = date.today()
                new_article.save()
                return HttpResponseRedirect(f'/class/{URLcodenumber}')
            # 可添加班级不存在的错误提示逻辑
            else:
                pass

    return render(
        request,
        'blogpage\\create_article.html',
        {
            'clsName': f'Параллель {URLcodenumber}',
            'codenumber': URLcodenumber,
            'form': ArticleForm()
        }
    )

其他确认点 #

• HTML表单已正确添加enctype="multipart/form-data"，满足文件上传的必要条件
• settings.py和urls.py的媒体配置正确，Admin能正常上传说明这部分无问题

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