如何将含文件属性的数组数据追加到FormData并适配后端接收

ASP.NET MVC的模型绑定对于包含文件的复杂对象数组，需要明确指定数组索引才能正确映射到后端的SampleData[]参数，以下是可行的实现方案：

正确的FormData构造代码 #

var formdata = new FormData();

// 遍历数据数组，按索引绑定每个对象的属性
$.each(data, function(index, vs) {
    // 使用 upls[索引].属性名 的格式追加数据
    formdata.append(`upls[${index}].t`, vs.t);
    // 追加文件时可传入第三个参数指定文件名（可选，默认用文件对象的name属性）
    formdata.append(`upls[${index}].u`, vs.u, vs.u.name);
});

// 发送AJAX请求示例
$.ajax({
    url: '/你的控制器名/Save',
    type: 'POST',
    data: formdata,
    // 必须设置这两个参数，避免jQuery自动处理FormData
    processData: false,
    contentType: false,
    success: function(res) {
        console.log('上传成功', res);
    },
    error: function(err) {
        console.error('上传失败', err);
    }
});

之前三种方案失败的原因 #

• Sample 1：直接将整个vs对象追加到FormData，FormData无法序列化复杂JavaScript对象，后端无法识别格式。
• Sample 2：使用upls[][t]、upls[][u]的格式，ASP.NET MVC无法将分散的[t]和[u]字段关联到同一个SampleData实例，会导致数组元素的属性不匹配。
• Sample 3：给数组添加自定义属性后追加，本质和Sample1一致，FormData无法处理带自定义属性的数组结构，后端无法解析。

后端注意事项 #

• 确保SampleData类的属性名（t、u）和前端追加的字段名完全一致。
• 控制器的Save方法可以直接接收SampleData[] upls参数，无需额外的FormCollection（如果没有其他表单数据需要接收的话）。

内容的提问来源于stack exchange，提问作者Uğur Demirel