Angular前端向C# API同时上传FormData文件与对象的实现疑问

问题原因 #

你之前尝试直接把SomeObject加入FormData失败，是因为FormData只能存储字符串或Blob类型，直接传入对象会被转成[object Object]这种无效字符串，后端无法解析。

前端修改步骤 #

将SomeObject序列化为JSON字符串后添加到FormData，同时确保文件参数正确传入：

uploadAttachment(abcId: number, someObject: SomeObject, fileData: File) {
  const url = `${this.apiUrl}/abc/${abcId}`;

  const formData = new FormData();
  // 添加文件
  formData.append('file', fileData);
  // 将对象转为JSON字符串后加入FormData
  formData.append('someObject', JSON.stringify(someObject));

  return this.http.post<ScopeItemAttachment>(url, formData, {
    reportProgress: true,
    observe: 'events'
  });
}

后端两种实现方案 #

方案一：手动读取并反序列化 #

直接从Request.Form中取出JSON字符串，手动反序列化为SomeObject：

using System.Text.Json;

[HttpPost("{abcID}", Name = "UploadAttachment")]
public IActionResult UploadAttachment(int abcId)
{
    try
    {
        var file = Request.Form.Files.FirstOrDefault();
        if (file == null || file.Length <= 0)
        {
            return BadRequest(new { message = "文件内容长度必须大于0" });
        }

        // 读取并反序列化SomeObject
        var someObjectJson = Request.Form["someObject"];
        if (string.IsNullOrEmpty(someObjectJson))
        {
            return BadRequest(new { message = "未传入SomeObject数据" });
        }
        var someObject = JsonSerializer.Deserialize<SomeObject>(someObjectJson);

        // 处理文件（示例：写入内存流）
        using (var ms = new MemoryStream())
        {
            file.CopyTo(ms);
            // 这里可添加文件保存到磁盘/数据库的逻辑
        }

        return Ok();
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"内部服务器错误: {ex.Message}");
    }
}

方案二：使用模型绑定（更简洁） #

创建包含文件和对象的模型，通过[FromForm]自动绑定：

1. 定义上传模型：

public class UploadModel
{
    public IFormFile File { get; set; }
    public SomeObject SomeObject { get; set; }
}

2. 修改API方法：

[HttpPost("{abcID}", Name = "UploadAttachment")]
public IActionResult UploadAttachment(int abcId, [FromForm] UploadModel model)
{
    try
    {
        if (model.File == null || model.File.Length <= 0)
        {
            return BadRequest(new { message = "文件内容长度必须大于0" });
        }
        if (model.SomeObject == null)
        {
            return BadRequest(new { message = "未传入SomeObject数据" });
        }

        // 处理文件
        using (var ms = new MemoryStream())
        {
            model.File.CopyTo(ms);
            // 文件处理逻辑
        }

        // 处理SomeObject业务逻辑
        return Ok();
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"内部服务器错误: {ex.Message}");
    }
}

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