React中如何以multipart/formData格式传输嵌套对象中的文件？

完全可以用multipart/form-data格式传输你需要的嵌套结构数据和文件，FormData虽然是扁平的键值对，但可以通过键名的层级命名来对应后端的嵌套结构，下面是具体的实现方法：

核心步骤 #

• 创建FormData实例
• 按后端结构的层级，添加普通字符串字段
• 循环遍历文件数组，逐个添加到FormData中
• 发送请求时让浏览器自动处理请求头

代码示例 #

假设你有一个React组件，包含输入itemIndex的输入框、输入dataAnswer的文本框，以及多文件上传控件：

import { useState } from 'react';

function AuditForm() {
  const [itemIndex, setItemIndex] = useState('');
  const [dataAnswer, setDataAnswer] = useState('');
  const [fileList, setFileList] = useState([]);

  // 处理文件选择
  const handleFileChange = (e) => {
    setFileList(Array.from(e.target.files));
  };

  // 表单提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // 创建FormData实例
    const formData = new FormData();

    // 添加嵌套的普通字段，用点语法对应后端的层级结构
    formData.append('dataInputDto.itemIndex', itemIndex);
    formData.append('dataInputDto.addAuditData.dataAnswer', dataAnswer);

    // 循环添加文件数组，键名用[]表示数组元素
    fileList.forEach((file) => {
      // 不带索引的写法，后端多数框架会自动解析为数组
      formData.append('dataInputDto.addAuditData.fileList[]', file);
      // 如果后端需要明确索引，可改用：
      // formData.append(`dataInputDto.addAuditData.fileList[${index}]`, file);
    });

    try {
      // 发送请求，这里用fetch示例（axios同理）
      const response = await fetch('/your-backend-api-url', {
        method: 'POST',
        body: formData,
        // 重要：不要手动设置Content-Type！浏览器会自动生成带boundary的正确请求头
      });

      const result = await response.json();
      console.log('提交成功:', result);
    } catch (error) {
      console.error('提交失败:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Item Index:</label>
        <input
          type="text"
          value={itemIndex}
          onChange={(e) => setItemIndex(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Data Answer:</label>
        <textarea
          value={dataAnswer}
          onChange={(e) => setDataAnswer(e.target.value)}
          required
        />
      </div>
      <div>
        <label>上传文件:</label>
        <input
          type="file"
          multiple
          onChange={handleFileChange}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default AuditForm;

关键注意点 #

• 不要手动设置Content-Type：当用FormData作为请求体时，浏览器会自动生成包含boundary的multipart/form-data请求头，手动设置会丢失这个关键的分隔标识，导致后端无法解析数据。
• 数组字段的命名：不同后端框架对数组参数的解析规则略有差异，如果fileList[]写法不生效，可以试试带索引的fileList[0]、fileList[1]格式。
• 文件对象处理：React中文件输入框返回的是FileList对象，需要转成数组才能遍历操作。

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