使用vanilla javascript ajax[ASP.NET Core]在同一POST请求中上载文件和Json数据

我正在尝试使用vanilla js Ajax发送POST请求，在这里我想上传一个文件和一些json数据

但我得到的是“内部服务器错误：500”，控制器参数为空值

请帮帮我

我的javascript代码

var btnSubmit = document.getElementById("btn-submit");
        btnSubmit.addEventListener("click", function () {

            var formData = new FormData();
            var fileElement = document.getElementById("WaterTankBlueprint");
            formData.append("file", fileElement.files[0]);

            var aquaFarm = {
                Name: document.getElementById("Name").value,
                Region: document.getElementById("Region").value,
                CEO: document.getElementById("CEO").value 
            }

            var aquaFarmViewModel = {
                AquaFarm: aquaFarm,
                WaterTankBlueprint: formData 
            };

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === xhr.DONE) {
                    if (xhr.status === 200) {

                    }
                }
            };

            xhr.open("POST", "/workplace/aqua-farm/add", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(aquaFarmViewModel));

        });

我的视图模型

public class AquaFarmViewModel
{
    public AquaFarm AquaFarm { get; set; }

    public IFormFile WaterTankBlueprint { get; set; }

}

我的控制器

 [HttpPost]
 [Route("workplace/aqua-farm/add")]
 public IActionResult AddAquaFarm([FromBody] AquaFarmViewModel viewModel)
 {
      // ...... code
      return RedirectToAction("AquaFarm");

 }

---

下面是一个工作演示，如下所示：

型号：

视图：

结果:

---

我可以在formdata中列出一个列表吗？当然可以。请参阅。如果我的答案对您有帮助，您可以接受作为答案吗？谢谢。如果我的答案有帮助，请您按如下方式标记：仍然有问题，请跟进让我知道。谢谢。

public class AquaFarmViewModel
{
    public AquaFarm AquaFarm { get; set; }
    public IFormFile WaterTankBlueprint { get; set; }
}

public class AquaFarm
{
    public string Name { get; set; }
    public string Region { get; set; }
    public string CEO { get; set; }
}

<form enctype="multipart/form-data">
    <div>File:<input type="file" id="WaterTankBlueprint" /></div>
    <div>Name:<input id="Name" /></div>
    <div>Region:<input id="Region" /></div>
    <div>CEO:<input id="CEO" /></div>
    <div><input type="button" id="btn-submit" value="Submit" /></div>
</form>
@section Scripts
{
<script>
    var btnSubmit = document.getElementById("btn-submit");
        btnSubmit.addEventListener("click", function () {

            var formData = new FormData();
            var fileElement = document.getElementById("WaterTankBlueprint");
            formData.append("WaterTankBlueprint", fileElement.files[0]);

            formData.append("AquaFarm.Name", document.getElementById("Name").value);
            formData.append("AquaFarm.Region", document.getElementById("Region").value);
            formData.append("AquaFarm.CEO", document.getElementById("CEO").value);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === xhr.DONE) {
                    if (xhr.status === 200) {

                    }
                }
            };

            xhr.open("POST", "/workplace/aqua-farm/add", true);
            xhr.send(formData);

        });
</script>
}

[HttpPost]
[Route("workplace/aqua-farm/add")]
public IActionResult AddAquaFarm(AquaFarmViewModel viewModel)
{
    // ...... code
    return RedirectToAction("Index");
}