Reactjs 如何使用Axios将多个文件发送到ASP.NET Core的控制器?
我尝试过收集和反序列化JSON,但没有任何效果。我不熟悉ASP.NET核心、React和Axios。我正在开发一个功能,用户可以上传多个文件,并提供该事件的详细信息 我使用了以下代码Reactjs 如何使用Axios将多个文件发送到ASP.NET Core的控制器?,reactjs,asp.net-core,axios,form-data,Reactjs,Asp.net Core,Axios,Form Data,我尝试过收集和反序列化JSON,但没有任何效果。我不熟悉ASP.NET核心、React和Axios。我正在开发一个功能,用户可以上传多个文件,并提供该事件的详细信息 我使用了以下代码 uploadFiles() { var eventDate = moment(this.state.dateOfEvent).format("DD/MM/YYYY"); var eDate = Date.parse(eventDate) var formData = new FormData
uploadFiles() {
var eventDate = moment(this.state.dateOfEvent).format("DD/MM/YYYY");
var eDate = Date.parse(eventDate)
var formData = new FormData();
formData.append("Event_name", this.state.eventName);
var imgArr = [];
for (var i = 0; i < this.state.chosenImages.length; i++) {
imgArr.push(this.state.chosenImages[i]);
}
var jsonImgs = JSON.stringify(imgArr);
formData.append("Image_Path", jsonImgs);
formData.append("Event_Date", eventDate);
axios({
method: 'POST',
url: '/api/Account/UploadGalleryImages',
contentType: 'application/json',
data: formData,
}).then(function (response) {
if (response.data.status == "SUCCESS") {
confirmAlert({
title: 'Gallery',
message: response.data.message,
buttons: [
{
label: 'Okay',
onClick: () => window.location.replace('/Reload_Window')
},
]
});
}
else {
console.log("Response:", response);
confirmAlert({
title: 'Window Title',
message: response.data.message,
buttons: [
{
label: 'Okay',
},
]
});
}
}.bind(this))
}
ASP.NET核心中控制器的请求对象
public class GalleryImagesAddRequest
{
private string event_name;
private string event_date;
private IList<IFormFile> fileCollection;
public string Event_name { get => event_name; set => event_name = value; }
public IList<IFormFile> Image_Path { get => fileCollection; set => fileCollection = value; }
public string Event_Date { get => event_date; set => event_date = value; }
}
请告诉我在服务器端接收所有图像时哪里出错了?首先,您不需要序列化文件数组,其次,为了在
ASP.NET Core
中绑定数组,您需要使用相同的键将多个值附加到FormData
。所以改变这部分代码
var imgArr = [];
for (var i = 0; i < this.state.chosenImages.length; i++) {
imgArr.push(this.state.chosenImages[i]);
}
var jsonImgs = JSON.stringify(imgArr);
formData.append("Image_Path", jsonImgs);
var imgArr=[];
for(var i=0;i
到
for(var i=0;i
非常感谢!!!它工作得很好。经过很长时间和这么多天,最终我的控制器收到选定的文件。我想对这个答案投一票以上,但我不能。非常感谢你,亚历山大。
public class GalleryImagesAddRequest
{
private string event_name;
private string event_date;
private IList<IFormFile> fileCollection;
public string Event_name { get => event_name; set => event_name = value; }
public IList<IFormFile> Image_Path { get => fileCollection; set => fileCollection = value; }
public string Event_Date { get => event_date; set => event_date = value; }
}
[HttpPost("UploadGalleryImages")]
[Route("api/[controller]/[action]")]
public string UploadGalleryImages(GalleryImagesAddRequest request)
{
Gallery gallery = new Gallery();
EventDetail eventDetail = new EventDetail();
Context db = new Context();
string message = "";
try
{
DateTime dateTime = DateTime.Parse(request.Event_Date).Date;
eventDetail.event_name = request.Event_name;
eventDetail.event_date = dateTime;
db.EventDetail.Add(eventDetail);
db.SaveChanges();
message = "SUCCESS";
}catch(Exception ex)
{
new Logger().write(ex);
message = "failed";
}
return message;
}
var imgArr = [];
for (var i = 0; i < this.state.chosenImages.length; i++) {
imgArr.push(this.state.chosenImages[i]);
}
var jsonImgs = JSON.stringify(imgArr);
formData.append("Image_Path", jsonImgs);
for (var i = 0; i < this.state.chosenImages.length; i++) {
formData.append("Image_Path", this.state.chosenImages[i]);
}