使用 vanilla javascript ajax [ASP.NET Core] 在同一個 POST 請求中上傳文件和 Json 數據

Question

我正在嘗試使用 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");

 }

Answer 1

這是一個如下所示的工作演示：

模型：

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");
}

結果：