Javascript 如何在formData中传递数组

我正在使用formData并尝试传递一个数组，该数组在.NETCore后端接收它 这是我尝试发送的数组truck.stateCtruck:

{
  0: {StaId: 6}
  1: {StaId: 7}
  2: {StaId: 8}
  3: {StaId: 9}
}

这是我发送数据的方法，我尝试只发送StaId及其值：

let formData = new FormData();
formData.set('DriId',truck.DriId);
formData.set('TruExdate',truck.TruExdate);
formData.set('TruAddress',truck.TruAddress);
formData.set('TruCity',truck.TruCity);
formData.set('TraId',truck.TraId);
formData.set('TruZip',truck.TruZip);
formData.set('TruYear',truck.TruYear);
formData.set('TruMake',truck.TruMake);
formData.set('TruType',truck.TruType);
formData.set('TruFuel',truck.TruFuel);
formData.set('TruAxles',truck.TruAxles);
formData.set('TruVin',truck.TruVin);
formData.set('TruDocurl',truck.TruDocurl);
formData.set('TraUnit',truck.TraUnit);
formData.set('TraMake',truck.TraMake);
formData.set('TraYear',truck.TraYear);
formData.set('TtyId',truck.TtyId);
formData.set('TraIntmaterial',truck.TraIntmaterial);
formData.set('TraEquipament',truck.TraEquipament);
formData.set('TraOption',truck.TraOption);
formData.set('Fichero',truck.Fichero);
formData.append('StateTruck',JSON.stringify(truck.StateTruck)); 

使用

console.log（formData.getAll（'statecruck'）打印到控制台时我明白了

["[{"StaId":6},{"StaId":7},{"StaId":8},{"StaId":9}]"]

我的后端需要这种结构：

public class TruckRequest
    {
        public int TruId { get; set; }
        public int? DriId { get; set; }
        public DateTime? TruExdate { get; set; }
        public string TruAddress { get; set; }
        public string TruCity { get; set; }
        public int? TraId { get; set; }
        public string TruZip { get; set; }
        public string TruYear { get; set; }
        public string TruMake { get; set; }
        public string TruType { get; set; }
        public string TruFuel { get; set; }
        public string TruAxles { get; set; }
        public string TruVin { get; set; }
        public string TruDocurl { get; set; }

        public string TraUnit { get; set; }
        public string TraMake { get; set; }
        public string TraYear { get; set; }
        public int? TtyId { get; set; }
        public string TraIntmaterial { get; set; }
        public string TraEquipament { get; set; }
        public string TraOption { get; set; }

        public IFormFile Fichero { get; set; }
        public string TruUregistro { get; set; }
        public DateTime? TruUfecha { get; set; }
        public string TruUupdate { get; set; }
        public DateTime? TruUupdatefecha { get; set; }
        public string TruEstado { get; set; }

        public virtual ICollection<StateTruck> StateTruck { get; set; }    
}


public partial class StateTruck
{
    public int SruId { get; set; }
    public int? StaId { get; set; }
    public string SruUregistro { get; set; }
    public DateTime? SruUfecha { get; set; }
    public string SruUupdate { get; set; }
    public DateTime? SruUupdatefecha { get; set; }
    public string SruEstado { get; set; }
    public int? TruId { get; set; }

}

公共类TruckRequest
{
公共int TruId{get；set；}
公共int？DriId{get；set；}
公共日期时间？TruExdate{get；set；}
公共字符串地址{get；set；}
公共字符串结构{get；set；}
公共int？TraId{get；set；}
公共字符串TruZip{get；set；}
公共字符串TruYear{get；set；}
公共字符串TruMake{get；set；}
公共字符串类型{get；set；}
公共字符串trufoure{get；set；}
公共字符串{get；set；}
公共字符串TruVin{get；set；}
公共字符串TruDocurl{get；set；}
公共字符串传输单元{get；set；}
公共字符串TraMake{get；set；}
公共字符串{get；set；}
公共int？TtyId{get；set；}
公共字符串TraIntmaterial{get；set；}
公共字符串传输设备{get；set；}
公共字符串选项{get；set；}
公共文件{get；set；}
公共字符串TruUregistro{get；set；}
公共日期时间？TruUfecha{get；set；}
公共字符串truUpdate{get；set；}
公共日期时间？truUpdateFecha{get；set；}
公共字符串TruEstado{get；set；}
公共虚拟ICollection状态{get；set；}
}
公共部分类载货汽车
{
公共int SruId{get；set；}
公共int？StaId{get；set；}
公共字符串sruurestro{get；set；}
公共日期时间？SruUfecha{get；set；}
公共字符串sruUpdate{get；set；}
公共日期时间？SRUUUUPDATEFECHA{get；set；}
公共字符串SruEstado{get；set；}
公共int？TruId{get；set；}
}

如何为其提供正确的格式以便接收？
如果需要将值转换为字符串，可以使用

e、 g

对于整数，例如

formData.set('TruYear', parseInt(truck.TruYear));

所有这些都以formData的形式传递到后端，您的服务器应该创建解析器来将转换为正确的格式，来验证它是否是正确的格式

永远不要信任前端提交的任何内容。尝试使用此库进行正确的字符串化。
当控制台注销数据时，您需要解析从
formData.getAll（'stateCruck'）
接收到的数组中的第一个元素。以下内容应该对您的场景有所帮助：

console.log（JSON.parse（formData.getAll（“statetrack”）[0]））
根据您的描述，我假设您希望使用formData将值（包括对象数组）从客户端传递到服务器端（Web API）。如果是这种情况，您可以参考以下示例代码：

客户端（使用JQuery Ajax调用web API方法）：

$（函数（）{
//提交主表单。
$（“#btnCreate”）。单击（函数（事件）{
//阻止默认区域。
event.preventDefault（）；
//定义一个数组来存储StateTrack
var statetruce=新数组（）；
对于（变量i=0；i<5；i++）{
国家休战推送（{StaId:i}）；
}
设formData=new formData（）；
formData.set（'DriId'，101）；
formData.set（'TruAddress'，'Address1'）；
formData.set（'TruCity'，'city A'）；
formData.set（'TraId'，1011）；
formData.set（'TruZip'，'zip12'）；
formData.set（'TruYear'，'years'）；
append（'statecruck'，JSON.stringify（statetruce））；
$.ajax({
url:“/api/TestAPI”，
类型：“post”，
async:true，
数据：formData，
processData:false，
contentType:false，
成功：功能（响应）{
//window.location.href=响应；
}
});
});
});

根据数组对象的属性创建视图模型，它用于反序列化数组对象

Web API方法中的代码：

    $(function () {
        //Submit Main Form.
        $("#btnCreate").click(function (event) {
            //Prevent Default Region.
            event.preventDefault();
            //define an array to store the StateTruck
            var statetruce = new Array();

            for (var i = 0; i < 5; i++) {

                statetruce.push({ StaId: i });
            }

            let formData = new FormData();
            formData.set('DriId', 101); 
            formData.set('TruAddress', "Address 1");
            formData.set('TruCity', "city A");
            formData.set('TraId', 1011);
            formData.set('TruZip', "zip12");
            formData.set('TruYear', "years "); 
            formData.append('StateTruck', JSON.stringify(statetruce));  
            $.ajax({
                url: '/api/TestAPI',
                type: "post",
                async: true,
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    // window.location.href = response;
                }
            });
        });
    });

    [HttpPost] 
    public async Task<IActionResult> Post(IFormCollection collection)
    {

        var DriId = collection["DriId"].ToString();
        var TruAddress = collection["TruAddress"].ToString();

        var StateTruck = collection["StateTruck"].ToString();
        //deserialize the object
        var result = System.Text.Json.JsonSerializer.Deserialize<List<StateTruckViewModel>>(StateTruck);

        //do something
        return Ok("success");
    }

[HttpPost]
公共异步任务发布（IFormCollection）
{
var DriId=collection[“DriId”].ToString（）；
var TruAddress=collection[“TruAddress”].ToString（）；
var statetrack=collection[“statetrack”].ToString（）；
//反序列化对象
var result=System.Text.Json.JsonSerializer.Deserialize（stateCruck）；
//做点什么
返回Ok（“成功”）；
}

然后调试屏幕截图，如下所示：

我要发送的不仅仅是一个项目，还有几个公共虚拟ICollection stateCruck{get；set；}
formData.getAll（“stateCruck”）
返回一个与给定键关联的值数组，这就是为什么需要访问第一个元素，该值仍然是一个对象数组。您可能希望改用
formData.get（“stateCruck”）
。生成的数组仍然是相同的
console.log（JSON.parse（formData.get（“statetrack”））
print console VM29356:1 Uncaught SyntaxError:JSON中位于console.log（JSON.parse（formData.getAll（“statetrack”）[0]）位置1的意外标记o希望发送的是这个数组formData.append（'statetrack'，JSON.stringify（truck.statetrack））;我不是在使用ajax我是在用reactjs和Axiost做这个过程没有办法按对象转换有很多字段，一个接一个地传递它是非常费力的我是在用reactjs而不是纯NodeJS你无论如何都可以使用它。我目前正在reactJs项目中使用它
    [HttpPost] 
    public async Task<IActionResult> Post(IFormCollection collection)
    {

        var DriId = collection["DriId"].ToString();
        var TruAddress = collection["TruAddress"].ToString();

        var StateTruck = collection["StateTruck"].ToString();
        //deserialize the object
        var result = System.Text.Json.JsonSerializer.Deserialize<List<StateTruckViewModel>>(StateTruck);

        //do something
        return Ok("success");
    }