Angular 10中FormData同时传文件与数据报415错误的技术问询

我之前处理过类似的场景，你遇到的415 Unsupported Media错误，核心原因是后端.NET Core的模型绑定无法直接解析你通过Blob传递的JSON数据——默认情况下，它只处理FormData里的普通键值对，而不会去读取application/json类型Blob的内容。下面给你两种可行的解决方案：

方案一：将数据对象拆分为FormData的键值对（推荐） #

这种方式最贴合后端默认的模型绑定逻辑，不需要修改后端代码，直接把嵌套对象和数组拆成对应的表单字段：

Angular代码修改： #

var dataForm : FormData = new FormData();
// 添加文件
dataForm.append('file', <File>files[0], (<File>files[0]).name);

// 拆分嵌套对象object1为表单字段
dataForm.append('object1.Name', 'Name');
dataForm.append('object1.ID', '1');

// 处理数组Arr：重复append同一个键，后端List会自动收集所有值
dataForm.append('Arr', '1');
dataForm.append('Arr', '2');
dataForm.append('Arr', '3');

为什么这样可行？ #

.NET Core的模型绑定会自动识别这种嵌套字段命名格式（比如object1.Name对应RequestParams里object1的Name属性），以及重复键的数组值，直接把FormData的内容映射到RequestParams对象里，同时你依然可以通过Request.Form.Files[0]获取上传的文件。

方案二：传递JSON字符串并在后端手动解析 #

如果你的数据结构非常复杂，不想拆分成单个字段，可以直接把JSON字符串作为普通表单值传递，然后在后端手动反序列化：

Angular代码修改： #

var dataForm : FormData = new FormData();
// 添加文件
dataForm.append('file', <File>files[0], (<File>files[0]).name);

var objectToSend : any = {};
objectToSend.object1 = { Name:'Name', ID: 1 };
objectToSend.Arr = [1,2,3];
// 直接传递JSON字符串，不要转成Blob
dataForm.append('data', JSON.stringify(objectToSend));

后端代码修改： #

using System.Text.Json;

[HttpPost("uploadFile"), DisableRequestSizeLimit]
public IActionResult Upload() {
    var file = Request.Form.Files[0];
    // 读取FormData里的data字段（JSON字符串）
    var dataJson = Request.Form["data"];
    // 手动反序列化为RequestParams对象
    var param = JsonSerializer.Deserialize<RequestParams>(dataJson, new JsonSerializerOptions {
        PropertyNameCaseInsensitive = true // 兼容Angular的驼峰命名和C#的PascalCase
    });
    
    // 这里可以处理param和file
    return Ok();
}

注意点： #

• 记得开启PropertyNameCaseInsensitive，因为Angular默认用驼峰命名（比如object1），而C#类是PascalCase（比如Object1），这样反序列化才能正确匹配。
• 这种方式需要你手动处理模型验证，如果有需要，要自己添加验证逻辑。

为什么原来的方法会报错？ #

你之前把JSON转成application/json类型的Blob加到FormData里，后端接收到的data字段是一个独立的文件类型项（而非普通文本），默认的模型绑定不知道要去读取这个Blob的内容并解析成RequestParams，所以抛出了415不支持媒体类型的错误。

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