Django ModelForm如何添加多文件字段实现关联多图上传

第一步：修正并改造表单代码 #

你原有代码中把Meta类缩进在了__init__方法内部，本身存在语法错误无法正常运行，先修正这个问题，再新增非模型绑定的多图上传字段，同时给表单加上文件上传必须的编码属性，把图片字段加入crispy-forms的渲染布局：

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, Div, Field
from .models import Listing

class ListingModelForm(forms.ModelForm):
    # 新增多图上传字段，不直接绑定Listing主模型
    images = forms.ImageField(
        widget=forms.ClearableFileInput(attrs={'multiple': True}),
        required=False,
        label="上传房源图片"
    )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        # 配置表单支持文件上传的编码属性
        self.helper.attrs = {"enctype": "multipart/form-data"}
        self.helper.layout = Layout(
            Fieldset(
                "位置信息",
                Div("location", css_class="col-md-12 col-lg-6")
            ),
            Fieldset(
                "图片上传",
                Div(Field("images", css_class="form-control"), css_class="col-12")
            )
        )

    # Meta类必须放在类层级，不能写在__init__方法内部
    class Meta:
        model = Listing
        fields = ["location"]

第二步：改造视图保存逻辑 #

Django默认的CreateView只会处理主模型（Listing）的字段保存，不会自动处理关联的图片数据，需要重写form_valid方法，在Listing实例保存完成后，批量创建关联的ListingImage记录：

from django.views.generic.edit import CreateView
from django.contrib.auth.mixins import LoginRequiredMixin
from .models import Listing, ListingImage
from .forms import ListingModelForm

class ListingCreateView(LoginRequiredMixin, CreateView):
    model = Listing
    form_class = ListingModelForm
    # 替换成你自己的创建成功后跳转地址
    success_url = "/listings/"

    def form_valid(self, form):
        form.instance.user = self.request.user
        # 先保存Listing主表实例
        response = super().form_valid(form)
        # 遍历所有上传的图片，创建关联的图片记录
        for upload_img in self.request.FILES.getlist('images'):
            ListingImage.objects.create(
                listing=self.object,
                image=upload_img
            )
        return response

注意事项 #

• 模板中使用{% crispy form %}标签渲染表单时，之前在FormHelper中配置的enctype属性会自动生效，不需要手动编写form标签。
• 上述实现仅覆盖创建场景，如果后续需要做编辑功能，需要额外补充已有图片删除、新图片追加的逻辑。
• 提前在settings.py中配置好MEDIA_ROOT和MEDIA_URL，开发环境下还要在根路由文件中添加media文件的访问路由，否则图片无法正常保存和访问。

内容的提问来源于stack exchange，提问作者John R Perry