React上传CSV至ASP.NET Core API遇空引用错误求助

云上老周

2026-7-19

问题分析与解决方案

核心错误原因

400错误+空引用异常的根源是前端FormData的键名与后端模型属性不匹配，导致ASP.NET Core无法正确绑定FileModel对象，最终file参数为null，触发空引用错误。同时前端的Blob转换和请求头设置也存在冗余/错误。

具体修复步骤

1. 修正FormData的键名

后端FileModel的属性名是FormFile，但前端用'file'作为键名，导致模型绑定失败。修改前端代码：

let formData = new FormData()
// 把键名从'file'改为'FormFile'，和后端属性名一致
formData.append('FormFile', fileSelector.current.files[0])

2. 移除不必要的Blob转换

直接上传原生File对象即可，转Blob会丢失文件元数据（比如文件名），完全没必要：

// 错误写法：formData.append('file', new Blob([fileSelector.current.files[0]]))
// 正确写法：
formData.append('FormFile', fileSelector.current.files[0])

3. 清理请求头设置

不需要手动设置Accept头，浏览器默认的即可；
绝对不要手动设置Content-Type: multipart/form-data，axios（假设apiCalls是axios封装）会自动生成包含boundary的正确请求头，手动设置会导致边界参数缺失，后端无法解析表单数据。

修改后的请求头部分：

// 直接移除自定义headers，或者只保留必要的（如果有身份验证等需求）
const reqHeaders = {}
// 或者如果需要身份验证头，比如Bearer token，只加这个：
// const reqHeaders = { headers: { 'Authorization': 'Bearer ' + token } }

4. 后端增加空值校验（可选但推荐）

在端点开头添加校验，提前返回明确错误，方便排查：

[HttpPost("Upload")]
public async Task<ActionResult> CsvUpload([FromForm] FileModel file)
{
    if (file?.FormFile == null)
    {
        return BadRequest("未上传有效文件");
    }
    // 后续解析和持久化逻辑...
}