附加到表单数据的 JavaScript 对象在服务器上始终作为 null 接收

Posted 2023-04-13

【中文标题】附加到表单数据的 JavaScript 对象在服务器上始终作为 null 接收

【英文标题】：Appended JavaScript object to form data is always received as null on server

【发布时间】：2020-03-09 04:59:21

【问题描述】：

在前端（附加图像文件和带有产品详细信息的 javascript 对象）：

 let f = new FormData();
 f.append('File', file);

 objectToSend = 
    ...values
 ;

f.append('ProductDto', objectToSend );

await createProduct(f);

export const createProduct = async data => 
  return axiosWrapper.request(
    url: `/products`,
    method: 'POST',
    data: data,
  );
;

在后端（以 FromForm 形式接收附加数据）：

// POST: api/products
[HttpPost]
public async Task<IActionResult> Post([FromForm]ProductFile file)

 // Create product

ProductFile 类如下所示：

public class ProductFile

   public IFormFile File  get; set; 
   public ProductDTO ProductDto get; set;  

问题是ProductDto 始终为空，而File 已按原样填充。我不明白这是为什么？

P.S 我也试过像这样附加它：

f.append('ProductDto', JSON.stringify(objectToSend));

干杯

【参考方案1】：

您在 FormData 中附加一个对象。表单数据接受键值对，其中值应为字符串，如 here 所述。

先尝试将对象转换为字符串

f.append('ProductDto', JSON.stringify(objectToSend) );

然后在您的后端，在访问它之前，将其转换回一个对象。

【讨论】：

我之前也尝试过，但当我在访问之前将鼠标悬停在我的属性上时，它仍然为空..

【参考方案2】：

您的问题是请求的内容类型是 formdata，因此 ASPNET 使用 FormData 模型绑定器来填充模型的属性。此模型绑定器将无法反序列化 json 并将其绑定到模型。

如果您希望模型绑定器能够设置对象属性的值，则需要在您的请求中将它们定义为 formdata。

例如，如果您的对象是这样的结构：

public class ProductDTO

    public int ProductId  get; set; 
    public string Name get; set; 

你需要这样做：

f.append('ProductDto.ProductId', objectToSend.productId );
f.append('ProductDto.Name', objectToSend.name);

另一种解决方案是在模型中使用字符串，然后自己反序列化 DTO：

public class ProductFile

   public IFormFile File  get; set; 
   public string ProductDto  get; set;  


[HttpPost]
public async Task<IActionResult> Post([FromForm]ProductFile file)

    var productDto = JsonConvert.DeserializeObject<ProductDTO>(file.ProductDto);

【讨论】：

所以我必须填写所有 ProductDTO 属性？

@Roxy'Pro 如果您想使用 FormDataModelBinder，是的，所有属性都必须包含在表单数据中。你可以这样做：for (let key of Object.keys(objectToSend)) f.append('ProductDto.' + key, objectToSend[key]); 但这只有在你的对象没有复杂的属性时才有效