使用formik-wizard-form的多步骤表单：文件上传如何传至服务器

看起来你已经成功在Formik多步骤表单里捕获到文件对象了，接下来要把这些文件传给服务器的话，核心是要用到FormData对象——因为JSON格式没办法传输二进制文件数据。我来给你一步步讲怎么实现：

1. 核心原理：用FormData包装表单数据 #

浏览器原生的FormData API专门用来构建包含文件和普通字段的表单数据，能被服务器正确解析。你不能直接把Formik的values（包含文件对象）转成JSON发送，必须用FormData来包装。

2. 修改Formik的提交逻辑 #

你需要重写Formik的handleSubmit方法，把Formik的所有表单值（包括文件数组和其他普通字段）转换为FormData对象，再发送给服务器。

给你一个具体的代码示例：

const handleSubmit = async (values, { setSubmitting }) => {
  try {
    // 初始化FormData实例
    const formData = new FormData();

    // 遍历Formik的values，把每个字段添加到FormData中
    Object.keys(values).forEach(key => {
      // 单独处理文件上传字段（你的字段名是upload）
      if (key === 'upload' && values[key]) {
        // 因为开启了multiple，values.upload是FileList对象，要循环添加每个文件
        Array.from(values[key]).forEach(file => {
          // 用upload[]作为键名，方便后端识别为数组
          formData.append('upload[]', file);
        });
      } else {
        // 普通表单字段直接添加
        formData.append(key, values[key]);
      }
    });

    // 发送请求到服务器，这里用fetch举例，用axios也可以
    const response = await fetch('/你的上传接口地址', {
      method: 'POST',
      body: formData,
      // 重要：不要手动设置Content-Type为multipart/form-data，浏览器会自动加上正确的boundary参数
    });

    if (response.ok) {
      console.log('文件和表单数据上传成功！');
      // 这里可以添加成功后的逻辑，比如跳转到结果页
    } else {
      throw new Error('上传失败，请重试');
    }
  } catch (error) {
    console.error('上传出错:', error);
    // 这里可以添加错误提示逻辑，比如显示给用户
  } finally {
    setSubmitting(false);
  }
};

3. 后端接收的注意事项 #

如果你的后端是Node.js/Express，需要用multer中间件来解析multipart/form-data格式的请求。举个简单的示例：

const multer = require('multer');
// 设置文件存储目录，uploads文件夹需要提前创建
const upload = multer({ dest: 'uploads/' });

// 用upload.array('upload')来接收名为upload的文件数组
app.post('/你的上传接口地址', upload.array('upload'), (req, res) => {
  // req.files 就是前端传来的文件数组
  // req.body 是其他普通表单字段
  console.log('收到上传的文件:', req.files);
  res.status(200).json({ message: '上传成功' });
});

4. 小细节优化 #

你现在写的文件输入框里的value={values.upload?.files}其实可以去掉——文件输入框是只读的，手动赋值可能会导致异常，只保留onChange里的setFieldValue逻辑就够了。

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