如何将完整对象追加到FormData？Angular对接ASP.NET API遇阻

你遇到的核心问题是ASP.NET的[FromForm]绑定复杂对象时，需要按对象层级用点分隔的键名传递参数，而非直接传JSON字符串或扁平键值对；另外手动设置Content-Type会破坏FormData自动生成的boundary，导致解析失败。

修正后的Angular代码 #

updateProduct(imageProductVM: ProductImageViewmodel): Observable<any> {
    const formData = new FormData();

    // 递归追加产品对象属性，键名格式为product.属性名（嵌套属性同理）
    const appendNestedObject = (obj: any, prefix: string) => {
        Object.keys(obj).forEach(key => {
            const value = obj[key];
            if (typeof value === 'object' && value !== null && !(value instanceof File)) {
                appendNestedObject(value, `${prefix}.${key}`);
            } else {
                formData.append(`${prefix}.${key}`, value);
            }
        });
    };

    if (imageProductVM.product) {
        appendNestedObject(imageProductVM.product, 'product');
    }

    // 追加文件列表
    for (const photo of imageProductVM.files) {
        formData.append('files', photo);
    }

    // 移除手动设置的Content-Type，Angular会自动生成带boundary的正确请求头
    return this.http.post(this.apiURL + '/product/', formData);
}

ASP.NET端注意事项 #

1. 确保Product类属性为公共可访问，且字段名与前端完全一致（大小写敏感，建议统一命名风格）：

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    // 其他业务属性...
}

2. 你当前的ProductService类定义已符合要求，无需修改。

之前方法无效的原因 #

• JSON.stringify生成的字符串无法被[FromForm]直接反序列化为复杂对象，不符合表单绑定逻辑；
• 直接遍历Object.keys追加的是扁平键（如Name），但ASP.NET期望带product.Name前缀的键，才能识别为ProductService中product对象的属性；
• 手动设置ContentType: "multipart/form-data"会丢失FormData自动生成的boundary参数，导致ASP.NET无法正确分割请求内容。

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