ASP.NET Razor Pages集成Filepond表单文件上传后端无法获取文件问题

核心问题原因 #

Filepond默认会自动异步上传文件，不会将文件数据嵌入到表单中，导致Razor Pages后端无法通过Request.Form.Files或绑定的List<IFormFile>获取文件。要实现表单提交后再处理文件，需配置Filepond禁用自动上传，并将文件数据注入表单。

前端配置步骤 #

1. 引入依赖：加载Filepond核心库及FileEncode插件（用于将文件编码进表单）
2. 配置表单：确保表单设置enctype="multipart/form-data"
3. 初始化Filepond：禁用自动处理，指定表单字段名

<form method="post" enctype="multipart/form-data">
    <!-- Filepond上传控件 -->
    <input type="file" class="filepond" name="UploadedFiles" multiple />
    <button type="submit">提交工单</button>
</form>

<!-- 引入Filepond资源 -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">

<script>
    // 注册文件编码插件
    FilePond.registerPlugin(FilePondPluginFileEncode);
    
    // 初始化Filepond实例
    const pond = FilePond.create(document.querySelector('.filepond'), {
        allowProcess: false, // 禁止自动上传，等待表单提交
        allowRevert: true,   // 允许移除已添加的文件
        name: "UploadedFiles" // 与后端绑定字段名保持一致
    });
</script>

后端Razor Pages处理 #

在PageModel中通过BindProperty绑定文件列表，表单提交后即可正常获取文件：

public class HelpDeskTicketModel : PageModel
{
    // 绑定字段名需与前端Filepond的name属性完全匹配
    [BindProperty]
    public List<IFormFile> UploadedFiles { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        if (UploadedFiles != null && UploadedFiles.Any())
        {
            foreach (var file in UploadedFiles)
            {
                // 示例：保存文件到服务器目录
                var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", file.FileName);
                using var stream = new FileStream(savePath, FileMode.Create);
                await file.CopyToAsync(stream);
            }
        }

        // 后续逻辑：保存工单数据、跳转页面等
        return RedirectToPage("TicketSubmitted");
    }
}

关键注意事项 #

• 表单编码类型：必须设置enctype="multipart/form-data"，否则表单无法携带文件二进制数据
• 插件依赖：FileEncode插件是核心，没有它Filepond不会将文件数据注入表单
• 字段名一致性：前端name属性与后端绑定字段名必须完全一致（区分大小写）
• 禁用自动上传：allowProcess: false是关键配置，避免文件提前异步上传

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