Vue.js+ASP.NET Core中FormData追加对象数组传参失败问题

问题原因 #

直接把JS对象数组整体append到FormData的写法是错的。FormData.append()只接受字符串、Blob（文件）类型的值，传入其他类型时会默认调用toString()做隐式转换，最后提交到后端的数组内容是无效的"[object Object]"字符串，ASP.NET Core内置的表单模型绑定器无法把这个字符串解析成CreateStockIngredientDto集合，所以后端拿不到参数，你贴的请求截图里也能看到这个错误的传值内容。
另外你贴的后端CreateStockCommand类代码有语法笔误，CreateStockIngredientDtos属性定义末尾少了闭合大括号}，先确认本地代码是完整可编译的。

修复方法 #

不需要改后端现有代码，只要调整前端传参格式就行：ASP.NET Core绑定表单集合参数时，要求集合内的字段按集合属性名[索引].字段名的格式逐字段传值，不能直接传整个数组。

修正后的前端代码 #

const formData = new FormData()

// 基础单值字段正常追加
formData.append('invoiceAttachment', invoiceAttachment.value)
formData.append('CreatedDate', createdDate.value)
formData.append('SupplierInvoiceId', supplierInvoiceId.value ?? '')
formData.append('SupplierId', supplierId.value)

// 对象数组按索引逐字段追加
createStockIngredientDtos.value.forEach((item, index) => {
  formData.append(`CreateStockIngredientDtos[${index}].IngredientId`, item.ingredientId)
  formData.append(`CreateStockIngredientDtos[${index}].Price`, item.price)
  formData.append(`CreateStockIngredientDtos[${index}].Quantity`, item.quantity)
  formData.append(`CreateStockIngredientDtos[${index}].StockedDate`, item.stockedDate)
  formData.append(`CreateStockIngredientDtos[${index}].ExpiryDate`, item.expiryDate)
})

axios.post('stock/create', formData, { 
  headers: { 'Content-Type': 'multipart/form-data' } 
}).then(response => {
  // 你的业务逻辑
})

注意事项 #

• 表单字段的键名必须和后端C#类的属性名完全匹配（大小写、名称一致），比如后端属性是IngredientId，就不能用全小写的ingredientId当键名，否则会绑定失败。
• DTO里所有非可空值类型（DateTime、decimal、int）都要传有效值，你示例里初始化的数组漏了StockedDate字段，会触发模型绑定错误。
• 要是觉得逐字段写太麻烦，也可以把整个数组用JSON.stringify()转成JSON字符串追加，再给后端对应字段加自定义模型绑定器解析JSON内容，但逐字段追加是零后端改造成本、兼容性最高的方案，优先用这个。

请求参数截图

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