Angular12如何通过FormData传递含动态文件/字符串的对象到.NET Core API

你采用的直接序列化整个payload再传入FormData的方式存在本质缺陷：JSON.stringify() 无法序列化JS原生的File/Blob类型对象，序列化后文件字段只会保留空对象{}，文件内容完全没有被传递到后端，所以后端只能读到字符串类型的Value，文件为空。

前端调整（Angular端） #

不要整体序列化payload，遍历payload的每一项，根据Value的类型分别处理后插入FormData，示例代码如下：

const formData = new FormData();
// 假设payload是你的动态对象数组
payload.forEach((item, index) => {
  // 传入基础标识字段，用于后端区分当前项类型
  formData.append(`Items[${index}].FieldName`, item.FieldName);
  formData.append(`Items[${index}].ValueType`, item.Value instanceof File ? 'File' : 'String');
  
  if (item.Value instanceof File) {
    // 文件类型直接append File对象，第三个参数传文件名
    formData.append(`Items[${index}].File`, item.Value, item.Value.name);
  } else {
    // 普通类型直接传值
    formData.append(`Items[${index}].Value`, item.Value?.toString() ?? '');
  }
});

// 提交时直接传入formData即可，Angular HttpClient会自动处理请求头
this.http.post('/api/xxx/create', formData).subscribe(res => {
  // 处理响应
});

后端调整（.NET Core端） #

1. 先定义适配的接收模型，利用.NET Core的表单绑定能力自动解析参数：

/// 单条动态项接收模型
public class DynamicFormItemDto
{
    /// 字段名
    public string FieldName { get; set; }
    /// 值类型：File/String
    public string ValueType { get; set; }
    /// 字符串类型的值
    public string Value { get; set; }
    /// 文件类型的值
    public IFormFile File { get; set; }
}

/// 整体请求接收模型
public class CreateCertificateRequest
{
    public List<DynamicFormItemDto> Items { get; set; }
}

2. 修改接口参数，用[FromForm]绑定模型：

[HttpPost, Route("create")]
public ResponseResult CreateNewCertificate([FromForm] CreateCertificateRequest request)
{
    ResponseResult apiRtn = new ResponseResult();
    try
    {
        foreach (var item in request.Items)
        {
            if (item.ValueType == "File")
            {
                // 此处item.File即为完整的上传文件对象，可读取内容、文件名、大小等属性
                var uploadFile = item.File;
                // 你的文件处理逻辑
            }
            else
            {
                // 此处item.Value即为字符串类型值
                var strValue = item.Value;
                // 你的字符串处理逻辑
            }
        }
        apiRtn.Status = true;
        apiRtn.Message = "Success";
    }
    catch (Exception ex)
    {
        apiRtn.Message = ex.Message;
        apiRtn.Status = false;
    }
    return apiRtn;
}

• 前端提交请求时不要手动设置Content-Type: multipart/form-data，浏览器会自动生成带边界标识的请求头，手动设置会导致边界缺失，参数解析失败。
• .NET Core 3.1+版本默认开启表单绑定配置，无需额外调整即可正常解析参数。

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