动态团队表单文件无法传递至后端问题求助

问题背景 #

开发支持动态添加成员的团队表单，包含memberName、memberDescription、memberJobTitle、images字段。提交时后端返回错误：

message: "Cannot read properties of undefined (reading 'path')"

文件无法正常传递，但已确认以下情况：

• Postman测试正常：通过form-data上传文件到接口完全可用，排除后端问题。Postman参数示例：
  • team[0][memberName]: "Lala"
  • team[0][memberJobTitle]: "Lala"
  • team[0][images][0]: "image.jpg"
  • team[0][memberDescription]: "Lala"
• 前端已捕获文件：console.log(values)能看到已上传的文件结构：

  team: Array(1)
  0:
  images:Array(1)
  0: FileList {0: File, length: 1}
  length: 1
  memberDescription: "work with us 5 years long"
  memberJobTitle: "marketing"
  memberName: "Jane Doe"
  

• 文件对象可打印：console.log("append image: ", item.images[0])能输出完整FileList：

  FileList {0: File, length: 1}
  0: File {name: 'real-estate-logo-template_1195-19.jpg.webp', lastModified: 1672667306966, lastModifiedDate: Mon Jan 02 2023 13:48:26 GMT+0000, webkitRelativePath: '', size: 9894, …}
  length: 1
  

相关代码 #

提交处理函数 #

const submitHandler = async (values) => {
    const formData = new FormData();

    // append other fields

    values.team = values.team || [{}];

    values.team.forEach((item, index) => {
      formData.append(`team[${index}][memberName]`, item.memberName || "");
      //append other team fields

      formData.append(`team[${index}][images][0]`, item.images[0]);

      console.log("append image: ", item.images[0]);
    });


    await axios({
      method: "POST",
      url: `http://localhost:8080/api/pages/${pageId}/aditional-section`,
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    })
      .then((res) => {
        console.log(res);
      })
      .catch((res) => {
        console.log(res);
      });

    console.log(values);
  };

Formik表单FieldArray部分 #

<FieldArray name="team">
    {({ insert, remove, push }) => (
      <div>
        {values.team.length > 0 &&
          values.team.map((item, index) => (
            <div className="row" key={index}>
              <div className="col">
                <label htmlFor={`team.${index}.images[0]`}>
                  Upload image
                </label>

                {/* <Field
                  name={`team.${index}.images`}
                  type="file"
                /> */}

                <FileInput
                  name={`team.${index}.images[0]`}
                  type="file"
                  value={undefined}
                />

                <ErrorMessage
                  name={`team.${index}.images[0]`}
                  component="div"
                  className="field-error"
                />
              </div>
            </div>
          ))}
        <button
          type="button"
          className="secondary"
          onClick={() =>
            push({
              memberName: "",
              memberJobTitle: "",
              memberDescription: "",
              images: "",
            })
          }
        >
          Add Member
        </button>
      </div>
    )}
</FieldArray>

解决方案 #

核心问题 #

你传递给FormData的是FileList对象，但FormData需要的是单个File实例；同时手动设置multipart/form-data请求头会丢失自动生成的boundary，导致后端解析失败。

具体修改步骤 #

1. 修正FormData文件追加逻辑：提取FileList中的第一个File对象

// 原代码
formData.append(`team[${index}][images][0]`, item.images[0]);

// 修改后
if (item.images[0]?.length > 0) {
  formData.append(`team[${index}][images][0]`, item.images[0][0]);
}

2. 调整FileInput字段命名：避免嵌套索引映射问题

// 原代码
<FileInput
  name={`team.${index}.images[0]`}
  type="file"
  value={undefined}
/>

// 修改后
<FileInput
  name={`team.${index}.images`}
  type="file"
  multiple={false} // 单文件上传场景设置为false
/>

3. 初始化成员的images字段为数组：匹配文件存储结构

push({
  memberName: "",
  memberJobTitle: "",
  memberDescription: "",
  images: [] // 替换原空字符串
})

4. 移除手动设置的Content-Type：axios会自动根据FormData生成正确的请求头（含boundary）

// 原代码
headers: {
  "Content-Type": "multipart/form-data",
  Authorization: "Bearer " + localStorage.getItem("token"),
},

// 修改后
headers: {
  Authorization: "Bearer " + localStorage.getItem("token"),
},

完成以上修改后，文件即可正确传递到后端，解决报错问题。

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