Formik表单上传文件无法送达服务器问题求助

我用Formik实现了一个多文件上传表单，表单能正常收集文件到状态，请求也能发送到正确路由，但服务器始终收不到文件。一开始用错误方式console.log输出FormData显示为空，修正输出方式后能看到FormData里确实包含选中的文件，但上传还是失败。相关代码如下：

API方法 #

export const uploadImage = async (heroId, image) => {
  const formData = new FormData();
  formData.append('images', image);

  return await httpClient.post(`/superheroes/${heroId}/images`, formData);
};

表单代码 #

<Formik
        initialValues={{ images: [] }}
        onSubmit={async (values, { setSubmitting }) => {
            const formData = new FormData();
            values.images.forEach((file) => {
                formData.append("images", file);
            });
            try {
                console.log([...formData.entries()]);
                await uploadImage(hero.id, formData);
                //dispatch(getHeroes());
            } catch (error) {
                console.error(error);
            } finally {
                setSubmitting(false); // unblock form submission after file upload
            }
        }}
    >
        {({ setFieldValue, isSubmitting }) => (
            <Form>
                <div>
                    <label>Images:</label>
                    <input
                        type="file"
                        id="images"
                        name="images"
                        multiple
                        onChange={(event) =>
                            setFieldValue("images", [...event.target.files])
                        }
                    />
                    <ErrorMessage name="images" className="error" component="div" />
                </div>
                <button type="submit" disabled={isSubmitting}>
                    Submit
                </button>
            </Form>
        )}
    </Formik>

问题分析 #

核心问题出在uploadImage函数：你在表单的onSubmit中已经把所有文件组装成了包含多个images字段的FormData，但API方法里又新建了一个FormData，还把传进来的整个FormData对象当成单个文件追加进去，导致服务器收到的是嵌套的FormData结构，根本不是预期的文件列表。

另外要注意：HTTP客户端（比如axios）发送FormData时，不要手动设置Content-Type: multipart/form-data，否则会丢失关键的boundary分隔符，服务器无法解析表单数据。

解决方案 #

1. 修正API方法 #

直接使用传入的已组装好的FormData，不需要重新创建：

export const uploadImage = async (heroId, formData) => {
  // 去掉多余的FormData创建和append操作，直接传入参数里的formData
  return await httpClient.post(`/superheroes/${heroId}/images`, formData);
};

2. 检查HTTP客户端配置 #

如果你的httpClient是axios这类库，确保没有全局设置错误的Content-Type。发送FormData时，axios会自动生成带boundary的正确multipart/form-data头，所以不要手动添加：

// 错误示例：禁止这么做
httpClient.defaults.headers.post['Content-Type'] = 'multipart/form-data';

// 正确做法：让客户端自动处理请求头

3. 核对服务器端接收逻辑 #

确认服务器端接收的字段名是images，并且支持多文件接收。比如Node.js/Express环境下用multer的话，要使用upload.array('images')而不是upload.single('images')。

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