将带有嵌套模型文件的ReactJs FormData发布到.net core 2.2 web api

ReactJs是一种流行的JavaScript库，用于构建用户界面。它提供了一个组件化的开发模式，可以更高效地创建交互式的Web应用程序。.NET Core是一个跨平台的开源框架，用于构建高性能的Web应用程序和服务。

在ReactJs中，我们可以使用FormData对象来处理带有嵌套模型文件的表单数据。FormData对象提供了一组方法，用于创建和管理表单数据。通过使用FormData对象，我们可以动态地构建一个包含嵌套模型文件的表单，并将其发送到后端服务器。

对于.net core 2.2 web api，我们可以通过创建一个控制器来处理来自前端的请求。在控制器中，我们可以使用[HttpPost]特性来指定一个方法用于处理POST请求，并使用[FromForm]特性来接收表单数据。

以下是一个处理带有嵌套模型文件的ReactJs FormData的示例：

在前端（ReactJs）：

import React from 'react';

class MyForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    
    const formData = new FormData();
    formData.append('name', 'John Doe');
    
    // 通过input标签的name属性来获取嵌套模型文件
    formData.append('profilePicture', event.target.profilePicture.files[0]);

    // 向后端发送POST请求
    fetch('/api/myController/myAction', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="name" />
        <input type="file" name="profilePicture" />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

在后端（.NET Core Web API）：

[ApiController]
[Route("api/[controller]")]
public class MyController : ControllerBase
{
  [HttpPost("myAction")]
  public IActionResult MyAction([FromForm] MyModel model)
  {
    // 处理来自前端的表单数据
    // 可以通过model访问传递的数据
    // model.Name
    // model.ProfilePicture

    // 返回响应
    return Ok(new { Message = "Form data received successfully." });
  }
}

public class MyModel
{
  public string Name { get; set; }
  public IFormFile ProfilePicture { get; set; }
}

在这个示例中，我们创建了一个ReactJs组件MyForm，当用户点击提交按钮时，会触发handleSubmit方法。在handleSubmit方法中，我们创建了一个FormData对象，并通过append方法添加了姓名和文件数据。然后，我们使用fetch函数发送POST请求到后端的API端点/api/myController/myAction。在后端，我们的控制器MyController中的方法MyAction使用[FromForm]特性来接收前端发送的表单数据，并将其映射到一个自定义模型MyModel中。然后，我们可以在MyAction方法中处理表单数据，并返回一个响应。

请注意，这只是一个示例，实际应用中可能会涉及更复杂的逻辑和验证。

关于ReactJs和.net core的更多信息，请参考以下链接：

希望这能对您有所帮助！