如何在FormData中高效传输包含文件对象的复杂数组数据-js教程-PHP中文网

如何在FormData中高效传输包含文件对象的复杂数组数据

本教程详细阐述了如何将包含字符串和文件对象的复杂数组数据，通过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 时，可能会遇到以下几种常见的尝试和它们的问题：

直接附加对象：
```
$.each(data, function(index, vs) {
   formdata.append('upls[]', vs); // 错误示例1
});
```
登录后复制
FormData.append() 方法期望的是字符串或 Blob/File 对象。直接附加一个JavaScript对象 (vs) 会导致其被转换为字符串 "[object Object]"，这显然不是我们期望的结构，也无法传递文件。
使用 JSON.stringify 附加整个对象：

即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情
```
// 假设尝试将整个对象字符串化
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 前缀。
错误的索引命名模式：
```
$.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 }
];

// 假设我们有三个文件输入框
// <input type="file" id="fileInput0">
// <input type="file" id="fileInput1">
// <input type="file" id="fileInput2">

// 模拟从文件输入框获取文件对象
// 实际应用中，你需要根据你的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逻辑的完整示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FormData 文件与数组上传示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .item-group { border: 1px solid #ccc; padding: 15px; margin-bottom: 15px; border-radius: 5px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], input[type="file"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        #response { margin-top: 20px; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9; }
    </style>
</head>
<body>
    <h1>上传包含文件和数据的数组</h1>

    <div id="data-container">
        <!-- 动态生成的数据项 -->
    </div>

    <button id="add-item-btn">添加数据项</button>
    <button id="upload-btn">上传数据</button>

    <div id="response"></div>

    <script>
        let itemCounter = 0;
        const dataItems = []; // 存储所有数据项的数组

        function addItem() {
            const newItem = { t: '', u: null };
            dataItems.push(newItem);

            const container = $('#data-container');
            const itemGroup = $('<div>').addClass('item-group').attr('data-index', itemCounter);

            itemGroup.append($('<label>').text(`数据项 ${itemCounter + 1} - 文本 (t):`));
            const textInput = $('<input type="text">')
                .attr('placeholder', '请输入文本')
                .val(newItem.t)
                .on('input', function() {
                    newItem.t = $(this).val();
                });
            itemGroup.append(textInput);

            itemGroup.append($('<label>').text(`数据项 ${itemCounter + 1} - 文件 (u):`));
            const fileInput = $('<input type="file">')
                .attr('id', `fileInput${itemCounter}`)
                .on('change', function() {
                    newItem.u = this.files[0] || null;
                });
            itemGroup.append(fileInput);

            container.append(itemGroup);
            itemCounter++;
        }

        // 初始添加两项
        addItem();
        addItem();

        $('#add-item-btn').on('click', addItem);

        $('#upload-btn').on('click', function() {
            var formData = new FormData();

            dataItems.forEach((item, index) => {
                // 附加字符串属性
                formData.append('upls[' + index + '].t', item.t);

                // 附加文件属性
                if (item.u instanceof File) {
                    formData.append('upls[' + index + '].u', item.u);
                } else {
                    // 如果没有文件，可以根据后端需求选择是否发送空值或跳过
                    // 这里我们选择发送一个空字符串，后端HttpPostedFileBase会是null
                    formData.append('upls[' + index + '].u', '');
                    console.warn(`数据项 ${index} 未选择文件。`);
                }
            });

            // 打印 FormData 内容进行调试 (仅用于开发环境)
            for (let [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }

            // 使用 fetch API 发送 FormData
            fetch('/MyController/Save', { // 请将此URL替换为你的实际后端API路径
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then

登录后复制

以上就是如何在FormData中高效传输包含文件对象的复杂数组数据的详细内容，更多请关注php中文网其它相关文章！