[英]Upload file and Json data in the same POST request using vanilla javascript ajax [ASP.NET Core]
I am trying to send a POST request using vanilla js Ajax, where I would like to upload a file and some json data.我正在尝试使用 vanilla js Ajax 发送 POST 请求,我想在其中上传文件和一些 json 数据。
But I am getting "Internal server error: 500" and the controller parameter is null value.但是我收到“内部服务器错误:500”并且控制器参数为空值。
please help me.请帮我。
my javascript code我的 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));
});
my viewmodel我的视图模型
public class AquaFarmViewModel
{
public AquaFarm AquaFarm { get; set; }
public IFormFile WaterTankBlueprint { get; set; }
}
my controller我的控制器
[HttpPost]
[Route("workplace/aqua-farm/add")]
public IActionResult AddAquaFarm([FromBody] AquaFarmViewModel viewModel)
{
// ...... code
return RedirectToAction("AquaFarm");
}
Here is a working demo like below:这是一个如下所示的工作演示:
Model:模型:
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; }
}
View:看法:
<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>
}
Controller:控制器:
[HttpPost]
[Route("workplace/aqua-farm/add")]
public IActionResult AddAquaFarm(AquaFarmViewModel viewModel)
{
// ...... code
return RedirectToAction("Index");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.