使用jQuery提交数组数据与图片时后端无法获取分类数据的问题

你的JS代码确实存在错误，导致后端无法正确读取Categories的数组数据，问题出在直接将数组对象传入FormData的append方法。

错误原因 #

FormData的append()方法仅支持字符串、Blob或File类型的参数。当你直接传入数组Selectedtags时，JS会自动调用数组的toString()方法，将其转为字符串"[object Object]"，后端拿到这个无效字符串后无法解析出预期的数组结构，所以显示为空。

两种解决办法 #

方法1：将数组转为JSON字符串传递

把数组序列化为JSON字符串，后端接收后再反序列化为对象数组：

var fileUpload = $("[name='Image']").get(0);
var files = fileUpload.files;

var fileData = new FormData();

var Selectedtags = [{
    "id": 1,
    "name": "wswsw"
}];

// 关键修改：转为JSON字符串
fileData.append("Categories", JSON.stringify(Selectedtags));
fileData.append("Image", files[0]);

$.ajax({
    "type": "post",
    "url": "/some url",
    "data": fileData,
    processData: false,
    contentType: false,
    success: function(response) {
    }
});

后端需要对应处理：比如C#用JsonConvert.DeserializeObject<List<你的分类实体类>>(Request.Form["Categories"])，Java用Jackson/Gson解析该字符串。

方法2：按表单数组格式逐个追加键值对

如果后端期望接收传统的表单数组格式（比如PHP的$_POST['Categories'][0]['id']），可以循环数组，逐个追加属性：

var fileUpload = $("[name='Image']").get(0);
var files = fileUpload.files;

var fileData = new FormData();

var Selectedtags = [{
    "id": 1,
    "name": "wswsw"
}];

// 关键修改：循环追加每个属性
Selectedtags.forEach((tag, index) => {
    fileData.append(`Categories[${index}].id`, tag.id);
    fileData.append(`Categories[${index}].name`, tag.name);
});
fileData.append("Image", files[0]);

$.ajax({
    "type": "post",
    "url": "/some url",
    "data": fileData,
    processData: false,
    contentType: false,
    success: function(response) {
    }
});

这种方式后端可以直接像读取普通表单字段一样获取数组数据。

内容的提问来源于stack exchange，提问作者Pankaj