multer搭配Formik上传文件失败 报req.file.path未定义错误

问题表现 #

• Postman调试上传接口功能正常：图片可保存到指定目录，imageUrl可正常写入MySQL数据库
• 前端通过Formik提交表单时，文件无法被识别为文件类型，仅被识别为字符串，手动设置表单encType=multipart/form-data后问题仍存在
• 后端运行时抛出错误：

image: req.file.path,
TypeError: Cannot read properties of undefined (reading 'path')

根本原因 #

1. Formik默认不会自动采集type="file"输入框的文件对象，未做自定义绑定的情况下，该字段拿到的只是文件的本地假路径字符串，不是真实的File实例
2. 直接向axios传入普通JS对象作为请求体，即使手动设置Content-Type: multipart/form-data请求头，浏览器也不会自动按multipart格式编码请求体，还会丢失必填的boundary分隔符，导致Multer完全无法解析到上传的文件，因此req.file为undefined

修复方案 #

1. 绑定文件输入框，让Formik获取真实文件对象 #

Formik导出的Field组件默认不处理文件类型输入，需要手动给文件输入框绑定onChange事件，通过setFieldValue把选中的File实例存入Formik状态，同时记得给image字段配置初始值：

<Formik
    initialValues={{ title: "", postText: "", image: null }}
    onSubmit={onSubmit}
    validationSchema={validationSchema}
  >
    {({ setFieldValue }) => (
      <Form
        className="formContainer"
        action="/"
        encType="multipart/form-data"
      >
        <label>Title: </label>
        <ErrorMessage name="title" component="span" />
        <Field autoComplete="off" name="title" placeholder="(Ex. Title...)" />
        <label>Post: </label>
        <ErrorMessage name="postText" component="span" />
        <Field
          autoComplete="off"
          name="postText"
          placeholder="(Ex. Post...)"
        />
        <input 
          type="file" 
          name="image"
          onChange={(e) => {
            setFieldValue("image", e.target.files[0]);
          }}
        />

        <button type="submit"> Create Post</button>
      </Form>
    )}
  </Formik>

2. 用FormData封装请求体，移除手动设置的Content-Type头 #

提交时不要直接传Formik返回的普通对象，需要构建FormData实例逐个塞入字段和文件；禁止手动设置Content-Type: multipart/form-data头，浏览器会自动为FormData请求添加正确的请求头和boundary分隔符，手动设置反而会导致Multer解析失败：

const onSubmit = (data) => {
  const formData = new FormData();
  formData.append("title", data.title);
  formData.append("postText", data.postText);
  if (data.image) {
    formData.append("image", data.image);
  }

  axios
    .post("http://localhost:3001/posts", formData, {
      headers: {
        accessToken: localStorage.getItem("accessToken"),
      },
    })
    .then((response) => {
      navigate("/");
    });
};

3. 后端增加异常兜底（可选建议） #

在路由逻辑中增加文件存在性判断，避免未传文件时直接抛出500错误：

router.post("/", validateToken, multer, async (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: "上传图片不能为空" });
  }
  const postBody = {
    title: req.body.title,
    postText: req.body.postText,
    image: req.file.path,
    username: req.user.username,
    UserId: req.user.id,
  };

  postBody.imageUrl = `${req.protocol}://${req.get("host")}/images/${
    req.file.filename
  }`;

  await Posts.create(postBody);
  res.json(postBody);
});

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