React上传图片遇MulterError: Unexpected field问题求助

问题背景 #

在React前端向Node.js后端上传图片时，触发MulterError: Unexpected field错误。已确认后端upload.single("image")与前端文件输入框的name属性均为"image"，但错误依然存在。启用Multer错误处理中间件后，输出显示被拒绝的字段为image。

问题根源 #

前端代码中存在重复添加image字段的操作：

const formData = new FormData(event.target);
// 重复append了image字段
const imageFile = formData.get("image");
formData.append("image", imageFile);

new FormData(event.target)会自动收集表单内所有字段（包括文件输入框的image），手动再次appendimage会导致FormData中存在两个同名的image字段，而upload.single("image")仅允许接收一个该字段，因此触发错误。

解决方案 #

删除前端代码中重复添加image字段的两行代码，保留new FormData(event.target)自动收集表单数据即可。

修正后的前端代码 #

import axios from "axios";
import { useNavigate } from "react-router-dom";

const Form = () => {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();

    // 直接通过表单元素创建FormData，自动包含所有字段
    const formData = new FormData(event.target);
  
    axios
      .post("https://instabackend-gcwk.onrender.com/newpost", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      })
      .finally(() => navigate("/insta"));
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="image">Image:</label>
        <input type="file" id="image" name="image" accept="image/*" />

        <button type="submit">Submit</button>
      </form>

      <button onClick={() => navigate(-1)}>Go Back Home</button>
    </div>
  );
};
export default Form;

补充说明 #

后端代码无需修改，保持原有的Multer配置和路由处理逻辑即可。修改后，FormData中只会包含一个image字段，符合upload.single("image")的接收要求，错误即可解决。

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