Filepond插件在.NET中上传文件时参数为null，无法写入数据库

你设置了FilePond的server选项指向Home/Index，这会让FilePond绕过表单的提交逻辑，直接向该地址发送文件请求，而非通过表单将文件传递给Account/ProfilePhoto接口。而你的Controller是为接收表单提交的文件设计的，两者逻辑不匹配，最终导致file参数为null。

提供两种处理方式，可根据需求选择：

方式一：让FilePond作为普通文件输入框，通过表单提交 #

删除FilePond的server配置，使其仅作为美化后的文件输入框，文件随表单一起提交到目标接口：

移除前端脚本中的这段代码：

FilePond.setOptions({
server: '@Url.Action("Index", "Home")'
});

修改后点击上传按钮，表单会正常提交，HttpPostedFileBase file参数即可接收到文件。

方式二：配置FilePond直接上传到目标Controller接口 #

若想利用FilePond的异步上传能力（如显示上传进度），需调整server配置指向正确接口，并修改Controller适配异步请求：

1. 调整前端server配置 #

FilePond.setOptions({
    server: {
        url: '@Url.Action("ProfilePhoto", "Account")',
        method: 'POST',
        headers: {
            'X-CSRF-Token': '@Html.AntiForgeryToken()' // 防止CSRF拦截
        }
    }
});

可选择移除表单提交按钮，或通过监听事件控制上传时机，FilePond默认会在文件添加后自动触发上传。

2. 修改Controller适配异步请求 #

调整接口返回JSON格式，便于前端处理结果：

[HttpPost]
public JsonResult ProfilePhoto(HttpPostedFileBase file)
{
    var userId = User.Identity.GetUserId();
    User user = _context.Users.Where(u => u.id == userId).First();
    
    if (file == null)
    {
        return Json(new { success = false, message = "Please Choose Image" });
    }
    
    if (file.ContentType != "image/jpeg" && file.ContentType != "image/png")
    {
        return Json(new { success = false, message = "File Format is wrong" });
    }
    
    user.IMAGEPATH = $"~/Components/ProfilePhotos/{Guid.NewGuid()}{file.FileName}";
    file.SaveAs(HttpContext.Server.MapPath(user.IMAGEPATH));
    _context.SaveChanges();
    
    return Json(new { success = true, redirectUrl = Url.Action("Profile", "Account") });
}

前端可监听上传完成事件，跳转至Profile页面：

const pond = FilePond.create(document.querySelector('.filepond'));
pond.on('processcomplete', (error, file) => {
    if (error) return;
    window.location.href = file.serverId.redirectUrl;
});

• 表单的enctype="multipart/form-data"已正确设置，无需修改。
• 使用方式二时，必须配置CSRF令牌，否则会被ASP.NET的安全机制拦截请求。

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