如何在Django模板中使用FilePond实现多图上传并解决表单提交异常？

问题根因 #

• FilePond默认启用异步即时上传模式，默认配置下不会将待提交文件随主表单同步发送到后端
• 前后端文件字段命名不匹配：前端文件输入框的name属性为file，后端代码却按filepond字段名读取上传文件列表

修复步骤 #

调整前端配置 #

在create.html的FilePond初始化脚本中补充核心配置，适配传统表单提交流程：

FilePond.registerPlugin(
    FilePondPluginImagePreview
);

FilePond.create(
    document.querySelector('input[type="file"]'),
    {
        // 关闭即时异步上传，文件将随主表单一同提交
        instantUpload: false,
        // 显式指定表单提交的文件字段名，和原input属性保持一致
        name: 'file',
        // 开启多文件支持，保证多图选择、移除、补充上传功能正常
        allowMultiple: true
    }
);

对齐后端读取逻辑 #

修改views.py中读取上传文件的字段名，和前端配置的表单字段完全匹配：

class NewsCreateView(CreateView):
    form_class = FileForm
    template_name = 'create.html'
    success_url = '/'

    def form_valid(self, form):
        post = form.save(commit=False)
        post.author = self.request.user
        post.save()
        # 读取和前端配置一致的file字段对应的多文件列表
        for f in self.request.FILES.getlist('file'):
            FileModel.objects.create(post=post, file=f)
        return super().form_valid(form)

校验注意点 #

• 表单标签必须保留enctype="multipart/form-data"属性，否则Django无法解析表单携带的文件内容
• 配置完成后无需额外编写前端JS收集FilePond内的文件，FilePond会自动将所有未被移除的待提交文件打包进表单提交数据包
• 若需要实现已关联图片的回显，可在FilePond初始化时通过files参数传入已有的图片地址，前端会自动渲染预览效果

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