React Formik多文件上传至.NET Core API报400错误求助

问题根源 #

前端构建FormData时存在多处错误，导致后端无法正确解析多文件集合：

• 循环遍历文件时变量名错误（uploadFiles应为profileFiles），且循环条件使用<=导致越界添加undefined值
• 错误地将整个profileFiles数组直接追加到FormData，与后续单个文件的追加冲突
• 文件追加时的键名格式可简化，.NET Core支持直接使用相同键名绑定集合

修复后的前端代码 #

const SavePerson = () => {

  const person : Person = {
    name: '',
    email: '',
    profileFiles: []
  }

  const formik = useFormik({
    initialValues: person,
    validationSchema: personSchema,
    onSubmit: (values) => {
      const formData = new FormData()
      // 处理普通字段，跳过文件字段
      formData.append('name', values.name)
      formData.append('email', values.email)
      
      // 处理多文件，直接使用相同键名，.NET Core会自动绑定到ICollection<IFormFile>
      values.profileFiles.forEach(file => {
        formData.append('profileFiles', file)
      })

      // 提交时无需手动设置Content-Type，让浏览器自动处理边界符
      axios.post(`${api}/SavePerson`, formData, {
        headers: {
          'Content-Type': undefined
        }
      })
    }
  })

  return (
    <>
       <form onSubmit={formik.handleSubmit} encType='multipart/form-data'>
        {/* 补充姓名、邮箱输入框（原代码遗漏，确保字段完整） */}
        <div>
          <label htmlFor="name">姓名:</label>
          <input 
            type="text" 
            id="name" 
            name="name" 
            value={formik.values.name} 
            onChange={formik.handleChange}
          />
        </div>
        <div>
          <label htmlFor="email">邮箱:</label>
          <input 
            type="email" 
            id="email" 
            name="email" 
            value={formik.values.email} 
            onChange={formik.handleChange}
          />
        </div>
        <div>
          <label htmlFor="profileFiles" className="m-2 p-6">Select Profiles:</label>
          <input 
            type='file' 
            id='profileFiles' 
            multiple={true} 
            name='profileFiles' 
            onChange={(e) => {
              // 简化文件数组转换
              const files = Array.from(e.target.files)
              formik.setFieldValue('profileFiles', files)
            }} 
          />
        </div>

        <div className="flex flex-row justify-center w-64 m-6">
          <button type="submit" className='bg-blue-500 '>Submit</button>
        </div>

      </form>
    </>
  )
}

关键说明 #

1. 后端代码无需修改，保持原有的Person类和SavePerson接口即可
2. 提交FormData时，手动设置Content-Type: undefined，避免axios默认添加的错误Content-Type头，让浏览器自动生成包含边界符的multipart/form-data头
3. 多文件追加时使用相同的键名profileFiles，.NET Core的模型绑定会自动将其收集到ICollection<IFormFile>集合中
4. 补充了原代码遗漏的姓名、邮箱输入框，确保表单字段完整

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