本教程详细阐述了如何将包含字符串和文件对象的复杂数组数据，通过formdata封装并发送至后端，使其能被asp.net mvc控制器正确模型绑定到强类型数组（如`sampledata[]`）。文章将分析传统formdata构建方法在此场景下的局限性，并提供一种利用索引命名规则构建formdata的专业解决方案，确保文件和相关数据同步、准确地上传和处理。

引言：复杂数组数据与文件上传的挑战

在现代Web应用开发中，我们经常需要将结构化的数据连同文件一并上传至服务器。当这些结构化数据以数组形式存在，且数组中的每个元素都包含一个或多个文件时，传统的 FormData 构建方法往往会遇到挑战。例如，需要上传一个用户列表，每个用户都有姓名和一张头像图片。本文将聚焦于一个具体的场景：如何将一个包含字符串属性和文件属性的对象数组，通过 FormData 发送到ASP.NET MVC后端，并使其能够被正确地模型绑定。

后端模型定义

首先，我们来看后端期望接收的数据结构。在ASP.NET MVC中，一个典型的包含文件属性的模型可能如下所示：

public class SampleData
{
    public string t { get; set; } // 字符串属性
    public HttpPostedFileBase u { get; set; } // 文件属性
    public SampleData() { }
}

后端控制器方法可能期望接收一个这样的 SampleData 数组：

public class MyController : Controller
{
    public JsonResult Save(FormCollection model, SampleData[] upls)
    {
        // 在这里处理接收到的 upls 数组和文件
        if (upls != null)
        {
            foreach (var item in upls)
            {
                // item.t 包含字符串数据
                // item.u 包含上传的文件
                // ... 进行文件保存或业务逻辑处理
            }
        }
        return Json(new { success = true, message = "数据和文件上传成功！" });
    }
}

这里的关键在于 SampleData[] upls，ASP.NET MVC的默认模型绑定器需要特定的 FormData 键值对命名规则才能正确地将前端数据映射到这个数组结构。

FormData传输的常见误区与挑战

假设前端有一个这样的数据数组，其中 file 代表一个 File 对象：

var data = [{t:"lorem", u: file1}, {t:"ipsum", u: file2}, {t:"generator", u: file3}];

开发者在尝试构建 FormData 时，可能会遇到以下几种常见的尝试和它们的问题：

1. 直接附加对象：

   $.each(data, function(index, vs) {
      formdata.append('upls[]', vs); // 错误示例1
   });

   FormData.append() 方法期望的是字符串或 Blob/File 对象。直接附加一个JavaScript对象 (vs) 会导致其被转换为字符串 "[object Object]"，这显然不是我们期望的结构，也无法传递文件。

2. 使用 JSON.stringify 附加整个对象：

   // 假设尝试将整个对象字符串化
   Object.entries(data).forEach(entry => {
       const [key, value] = entry; // 如果data是数组，key会是索引
       formData.append(key, JSON.stringify(value));
   });

   这种方法虽然可以将JavaScript对象转换为JSON字符串，但存在几个问题：

   • 文件处理问题：JSON.stringify() 无法正确序列化 File 对象。当遇到 File 对象时，它通常会被忽略或序列化为空对象 {}，导致文件数据丢失。
   • 后端绑定问题：即使能序列化，后端 SampleData[] upls 期望的是 multipart/form-data 格式的字段，而不是一个包含JSON字符串的字段。后端模型绑定器不会自动解析这些JSON字符串并将其映射到 SampleData 对象的各个属性。
   • 命名不匹配：如果 data 是一个数组，Object.entries(data) 会产生 key 为数组索引的键（如 0, 1），而不是后端期望的 upls 前缀。

3. 错误的索引命名模式：

   $.each(data, function(index, vs) {
      formdata.append('upls[][t]', vs.t); // 错误示例2
      formdata.append('upls[][u]', vs.u);
   });

   虽然这种模式在某些后端框架中可能有效，但对于ASP.NET MVC的模型绑定，upls[][] 这种双层空方括号的命名方式通常无法正确地将数据绑定到 SampleData[] 中的每个独立对象。ASP.NET MVC需要更明确的索引。

正确的FormData构建策略：利用索引命名规则

为了让ASP.NET MVC的后端模型绑定器能够正确识别并绑定 SampleData[]，我们需要遵循其特定的命名约定。对于一个数组中的对象，其属性的命名格式通常是 数组名[索引].属性名。

因此，对于我们的 data 数组，正确的 FormData 构建方式应该是为每个 SampleData 对象的 t 和 u 属性分别添加带有索引的键。

客户端（JavaScript）实现

以下是使用JavaScript和jQuery（或纯JavaScript）构建 FormData 的正确方法：

// 假设这是你的原始数据数组
var data = [
    { t: "lorem", u: null }, // u 属性将由用户选择的文件填充
    { t: "ipsum", u: null },
    { t: "generator", u: null }
];

// 假设我们有三个文件输入框
// 
// 
// 

// 模拟从文件输入框获取文件对象
// 实际应用中，你需要根据你的UI设计获取文件
function getFileFromInput(id) {
    const input = document.getElementById(id);
    return input && input.files && input.files[0] ? input.files[0] : null;
}

// 填充文件对象到数据数组
data[0].u = getFileFromInput('fileInput0');
data[1].u = getFileFromInput('fileInput1');
data[2].u = getFileFromInput('fileInput2');

// 创建 FormData 实例
var formData = new FormData();

// 遍历数据数组，并按照后端期望的命名规则附加到 FormData
$.each(data, function(index, item) {
    // 附加字符串属性
    formData.append('upls[' + index + '].t', item.t);

    // 附加文件属性
    // 确保 item.u 是一个 File 对象（或 Blob）
    if (item.u instanceof File) {
        formData.append('upls[' + index + '].u', item.u);
    } else {
        // 如果没有文件，可以根据后端需求选择是否发送空值或跳过
        // 例如，发送一个空字符串，或者不发送该字段
        // formData.append('upls[' + index + '].u', '');
        console.warn(`Item at index ${index} does not have a valid File object for property 'u'.`);
    }
});

// 验证 FormData 内容 (可选)
for (let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
}

// 示例：使用 fetch API 发送 FormData
fetch('/MyController/Save', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(result => {
    console.log('上传结果:', result);
})
.catch(error => {
    console.error('上传失败:', error);
});

关键点解析：

• upls[索引].属性名：这是ASP.NET MVC模型绑定器识别数组中对象属性的关键命名模式。upls 是控制器方法参数的名称，[index] 表示数组中的位置，.t 和 .u 是 SampleData 类的属性名。
• item.u instanceof File：在附加文件之前，务必确认 item.u 确实是一个 File 对象（或 Blob）。FormData.append() 方法能够正确处理 File 和 Blob 对象，将其作为 multipart/form-data 的一部分发送。
• FormData 自动设置 Content-Type：当使用 fetch 或 XMLHttpRequest 发送 FormData 实例时，浏览器会自动设置 Content-Type 头为 multipart/form-data 并包含正确的 boundary，无需手动设置。

完整前端示例（HTML & JavaScript）

为了更直观地展示，我们提供一个包含HTML文件输入框和JavaScript逻辑的完整示例。

    
    
    
    
    


    
上传包含文件和数据的数组

    
        
    

    添加数据项
    上传数据