Formik多步骤表单使用Axios上传图片时报错该如何解决？

报错截图：

FileReader返回的图片JSON数据：

错误根因 #

multer仅支持解析multipart/form-data类型请求中的二进制File对象，你通过FileReader将图片转成了JSON/Base64格式的文本传给后端，multer无法识别该格式，因此抛出报错。

修复步骤 #

1. 调整Formik文件存储逻辑 #

不要将File对象通过FileReader转成文本格式存储，直接将原始File对象存入Formik状态；如果需要图片预览功能，单独生成Base64用于预览，不要将Base64作为上传参数：

// 图片选择事件示例
const handleImgSelect = (e) => {
  const selectedFile = e.target.files[0];
  // 直接存储原始File对象到Formik
  formik.setFieldValue('imgFile', selectedFile);
  
  // 单独处理预览逻辑，和上传参数分离
  const reader = new FileReader();
  reader.onload = (e) => {
    setPreviewUrl(e.target.result); // 预览地址存在单独的状态里
  }
  reader.readAsDataURL(selectedFile);
}

2. 调整Axios请求配置 #

提交时使用FormData封装所有表单参数，同时指定请求头Content-Type为multipart/form-data：

const submitForm = async (values) => {
  const formData = new FormData();
  // 遍历所有表单参数塞入FormData
  Object.entries(values).forEach(([key, value]) => {
    formData.append(key, value);
  })
  try {
    const res = await axios.post('你的后端接口地址', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    // 后续成功逻辑
  } catch (err) {
    // 错误处理逻辑
  }
}

3. 后端multer配置校验 #

确认multer配置中接收的文件字段名，和前端塞入FormData的图片字段名完全一致：

const multer = require('multer');
// 自定义存储规则示例
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploadDir') // 替换为你的本地存储路径
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`)
  }
})
// 注意single方法的参数要和前端的图片字段名完全一致，本次示例为imgFile
const uploadMiddleware = multer({storage}).single('imgFile');

多步骤表单特殊注意项 #

多步骤表单切换步骤时，不要将File对象序列化后存入localStorage/sessionStorage，序列化会丢失File对象的二进制信息，建议将文件对象存储在非持久化的全局状态（如Redux、Zustand、Vuex等）中跨步骤传递。 #

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