React多步骤表单结合multer与react-images-upload图片上传问题求助

我在React多步骤表单中尝试结合react-images-upload、multer实现图片保存功能时遇到了问题，其他表单字段可正常提交，但图片无法被后端接收处理。

相关代码 #

Media步骤组件代码

export default function Media({ formData, setFormData }) {

  const handleChange = (event) => {
    setFormData({
      ...formData,
      foto: [event]
    });
  };

  return (
    <Grid container spacing={1}>
       ..
      <Grid container item xs={8} spacing={2}>
        <div className="container">
          <FormControl>
            <ImageUploader
              withIcon={false}
              withPreview={true}
              buttonText="Choose images"
              onChange={handleChange}
              imgExtension={[".jpg", ".gif", ".png", ".gif"]}
              maxFileSize={5242880}
            />
          </FormControl>
        </div>
      </Grid>
    </Grid>
  );
}

ProductForm文件代码

function getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return (
          <Basics
            formData={formData}
            setFormData={setFormData}
          />
        );
      case 1:
        return <Price formData={formData} setFormData={setFormData} />;
      case 2:
        return <Shipping formData={formData} setFormData={setFormData} />;
      case 3:
        return (
          <Media formData={formData} setFormData={setFormData}   />
        );
    }
  }

  const [activeStep, setActiveStep] = useState(0);
  const steps = getSteps();

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };
  const handleReset = () => {
    setActiveStep(0);
  };

  const save = () => {
    saveProduct(formData, setFormData, handleReset);
  };

saveProduct函数代码

export async function saveProduct(formData, setFormData, handleReset) {
  const foto =  formData.foto ;
  console.log(foto)
  return await axios({
    method: "post",
    url: `${URL}/api/productos`,
    data: formData,
    headers: { "content-type": "multipart/form-data" },
  })
}

后端代码（其他功能正常）

router.post('/',upload.array('foto', 10),this.controlador.saveProducts);

注：onChange回调的event返回值为包含File对象的数组，每个对象包含name、size、type等文件属性。

解决方案 #

1. 修正前端图片选择的赋值逻辑

react-images-upload的onChange回调直接返回已选择的文件数组，无需额外嵌套数组：

const handleChange = (files) => {
  setFormData({
    ...formData,
    foto: files // 直接使用返回的文件数组
  });
};

2. 用FormData正确封装提交数据

普通JS对象无法正确传递文件数据，必须使用FormData对象封装，且不要手动设置content-type（axios会自动处理边界值）：

export async function saveProduct(formData, setFormData, handleReset) {
  const submitData = new FormData();

  // 添加普通表单字段
  Object.keys(formData).forEach(key => {
    if (key !== 'foto' && formData[key]) {
      submitData.append(key, formData[key]);
    }
  });

  // 添加图片文件（对应后端upload.array('foto',10)）
  if (formData.foto && formData.foto.length > 0) {
    formData.foto.forEach(file => {
      submitData.append('foto', file);
    });
  }

  return await axios({
    method: "post",
    url: `${URL}/api/productos`,
    data: submitData
  })
  .then(res => {
    handleReset();
    return res;
  })
  .catch(err => {
    console.error(err);
    throw err;
  });
}

3. 确认后端multer初始化配置

确保multer实例配置正确，且存储目录存在并具备读写权限：

const multer = require('multer');
const path = require('path');
const fs = require('fs');

// 配置文件存储路径和文件名
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadDir = path.join(__dirname, '../uploads');
    // 确保目录存在，不存在则创建
    fs.mkdirSync(uploadDir, { recursive: true });
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免覆盖
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

const upload = multer({ 
  storage: storage,
  // 可选：限制文件类型
  fileFilter: (req, file, cb) => {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('仅支持JPG/PNG/GIF格式的图片'));
    }
  }
});

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