如何在ASP.NET Core Web API中接收Axios传递的FormData？

前端代码问题 #

你的请求触发400错误的核心原因及修正点：

1. 错误手动设置Content-Type
   当使用FormData提交请求时，浏览器会自动生成包含boundary（分隔符）的Content-Type头（格式如multipart/form-data; boundary=----WebKitFormBoundaryxxx）。手动固定设置Content-Type: multipart/form-data会丢失关键的boundary信息，导致服务端无法解析表单数据。
   解决：删除手动配置的Content-Type头，Axios会自动处理该字段。

2. 代码逻辑混杂
   你在await axios.post()后混用了.then()/.catch()，且代码中出现了res.json()、res.status()这类后端代理代码的写法。如果是纯前端代码，需移除res相关逻辑；如果是Node.js代理场景，需统一异步处理逻辑。

修正后的前端代码示例：

const formData = new FormData();
formData.append('folder', folder);
formData.append('file', file);

try {
  const response = await axios.post('https://localhost:7275/Upload', formData, {
    withCredentials: true,
    httpsAgent: new https.Agent({ rejectUnauthorized: false }),
  });
  console.log("Response Data : ", response.data);
} catch (error) {
  console.error('Upload error: ', error);
}

.NET Core 6服务端正确接收方式 #

服务端需通过IFormFile接收文件，同时绑定普通表单字段，以下是两种实现方式：

方式1：直接声明方法参数 #

[ApiController]
[Route("[controller]")]
public class UploadController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Post(string folder, IFormFile file)
    {
        // 参数校验
        if (file == null || file.Length == 0)
        {
            return BadRequest("文件不能为空");
        }
        if (string.IsNullOrEmpty(folder))
        {
            return BadRequest("文件夹名称不能为空");
        }

        // 示例：将文件保存到指定文件夹
        var saveDir = Path.Combine("你的存储根路径", folder);
        Directory.CreateDirectory(saveDir);
        var savePath = Path.Combine(saveDir, file.FileName);
        
        using (var stream = new FileStream(savePath, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }

        return Ok(new { Message = "上传成功", SavePath = savePath });
    }
}

方式2：使用模型绑定（参数较多时推荐） #

先定义模型类：

public class UploadRequest
{
    public string Folder { get; set; }
    public IFormFile File { get; set; }
}

再实现控制器方法：

[HttpPost]
public async Task<IActionResult> Post([FromForm] UploadRequest request)
{
    if (request.File == null || request.File.Length == 0 || string.IsNullOrEmpty(request.Folder))
    {
        return BadRequest("参数不完整");
    }

    // 后续文件处理逻辑同方式1
    return Ok("上传成功");
}

服务端额外配置 #

• 在Program.cs中确保启用表单解析及调整上传限制（若需要）：

  var builder = WebApplication.CreateBuilder(args);
  builder.Services.AddControllers();
  // 配置最大上传文件大小（示例为100MB）
  builder.Services.Configure<FormOptions>(options =>
  {
      options.MultipartBodyLengthLimit = 104857600;
  });
  
  var app = builder.Build();
  app.UseHttpsRedirection();
  app.UseAuthorization();
  app.MapControllers();
  app.Run();
  

• 跨域场景：若前端与服务端域名/端口不同，需在服务端配置CORS，允许对应前端来源的POST请求。

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