React提交FormData时C#后端HttpContext.Current.Request.Params始终为空

前端问题修复 #

你手动设置了Content-Type: multipart/form-data，但fetch在发送FormData时会自动生成包含boundary的正确Content-Type，手动设置会缺失boundary参数，导致后端无法解析表单数据。

修改后的前端代码：

export async function uploadFile(file, type) {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("fileType", type);
  console.log(...formData);

  try {
    const url = `${auth.getApi()}/FileUpload`;
    const resp = await fetch(url, {
      method: "POST",
      body: formData,
      headers: new Headers({
        Authorization: auth.BasicAuth()
        // 移除手动设置的Content-Type
      }),
    });
    return resp;
  } catch (e) {
    console.log(e);
    return e;
  }
}

后端代码优化 #

ASP.NET Web API中，直接用HttpContext.Current.Request.Params获取multipart表单数据并不靠谱，应该通过Request.Content.ReadAsMultipartAsync()来解析：

修改后的后端代码片段：

[BasicAuthenticationFilter(true)]
[HttpPost]
public async Task<IHttpActionResult> Post()
{
    try
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            return BadRequest("请求不是multipart类型");
        }

        var provider = new MultipartMemoryStreamProvider();
        await Request.Content.ReadAsMultipartAsync(provider);

        // 获取fileType参数
        string fileType = provider.FormData.GetValues("fileType")?.FirstOrDefault();
        if (string.IsNullOrEmpty(fileType))
        {
            return BadRequest("缺少fileType参数");
        }

        // 获取上传的文件
        var fileContent = provider.Contents.FirstOrDefault(c => c.Headers.ContentDisposition.Name.Equals("file"));
        if (fileContent == null)
        {
            return BadRequest("缺少file参数");
        }
        var fileStream = await fileContent.ReadAsStreamAsync();
        // 后续文件处理逻辑...

        return Ok("上传成功");
    }
    catch (Exception ex)
    {
        logger.Error(ex.Message);
        return InternalServerError(ex);
    }
}

为什么Postman能正常工作？ #

Postman会自动为multipart请求添加正确的boundary参数，后端可以正常解析；而你手动设置Content-Type时没有包含这个关键参数，导致解析失败。

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