如何在不使用额外第三方库的情况下将FilePond与Django配合使用

无需第三方库的原生对接方案 #

你的问题根因和id转移无关，表单提交识别的是输入框的name属性而非id，只需正确配置FilePond的参数即可让文件正常提交到Django后端，具体实现步骤如下：

1. 后端代码示例

# views.py
from django.views.generic.edit import FormView
from django import forms

# 自定义上传表单
class UploadForm(forms.Form):
    # 这里的字段名要和前端input的name属性完全对应
    upload_file = forms.FileField()
    # 如需支持多文件上传，改用下面的写法
    # upload_file = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': True}))

class FileUploadView(FormView):
    form_class = UploadForm
    template_name = "upload.html"
    success_url = "/success/"

    def form_valid(self, form):
        # 单文件获取方式
        file = form.cleaned_data["upload_file"]
        # 多文件获取方式
        # files = self.request.FILES.getlist("upload_file")
        
        # 自定义文件处理逻辑，比如保存到本地、写入模型字段等
        with open(f"uploads/{file.name}", "wb+") as f:
            for chunk in file.chunks():
                f.write(chunk)
        return super().form_valid(form)

2. 前端模板代码示例

首先自行引入FilePond的CSS和JS资源，模板内容如下：

<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <!-- 只需保证input的name属性和后端表单字段名一致即可，id不影响提交 -->
    <input type="file" class="file-uploader file-uploader-grid" name="upload_file">
    <!-- 多文件上传加multiple属性：<input type="file" name="upload_file" multiple> -->
    <button type="submit">提交</button>
</form>

<script>
const input = document.querySelector('input[name="upload_file"]');
FilePond.create(input, {
  // 核心配置：开启后FilePond会自动将文件存入原生表单控件中，提交时自动携带
  storeAsFile: true,
  // 其他自定义配置按需添加，比如文件类型限制、大小限制等
  allowMultiple: false,
  maxFileSize: '10MB',
  acceptedFileTypes: ['image/*', 'application/pdf'],
});
</script>

原问题说明

你之前尝试给input加id不生效是因为找错了问题根因：FilePond初始化时转移id的行为是组件的默认逻辑，完全不影响表单提交。只要配置了storeAsFile: true，FilePond会自动维护对应name属性的文件输入控件，Django侧request.FILES就能正常获取到上传的文件。

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