使用Axios上传图片至Express API时出现MulterError: Unexpected field问题

看起来你遇到的核心问题是前端FormData中的字段名没有和后端multer配置的字段名匹配，或者自动转换函数objectToFormData没有正确处理文件数组的格式，另外手动设置Content-Type也可能导致边界（boundary）缺失，让multer无法正确解析表单数据。

我来一步步帮你解决：

1. 手动构建FormData（避免自动转换的坑） #

自定义的objectToFormData函数经常会在处理数组时出错——multer要求上传多个文件时，需要用同一个字段名多次调用append（比如formData.append('images', file)），而很多自动转换工具会把数组转成images[0]、images[1]这种格式，这就会触发Unexpected field错误。

修改你的handleSubmit函数，手动构建FormData：

handleSubmit = e => {
  e.preventDefault();
  const { title, images } = this.state;
  /* 这里保留你的验证逻辑 */
  
  const formData = new FormData();
  // 添加普通文本字段
  formData.append('title', title);
  // 遍历图片数组，逐个添加到FormData，字段名统一用'images'
  images.forEach(file => {
    // 注意：这里的file需要是原生File对象，你在onDrop里添加的preview属性不影响，因为FormData会识别File类型
    formData.append('images', file);
  });

  // 移除手动设置的Content-Type，让Axios自动处理
  api.post('/adverts', formData)
    .then(advert => Router.push(`/ad/${advert.data.reference}`));
}

2. 移除Axios的Content-Type配置 #

当你向Axios传递FormData对象时，Axios会自动设置正确的Content-Type头（包含multipart/form-data和自动生成的boundary值）。如果手动设置Content-Type: multipart/form-data，会丢失boundary信息，导致multer无法解析表单，这也是常见的触发错误的原因。

3. 验证字段名一致性 #

确认后端multer的配置是upload.array('images')，前端append的字段名也是'images'——这一点你的代码里看起来是对的，但自动转换函数可能偷偷改了字段名，所以手动构建FormData能彻底避免这个问题。

额外检查：确保state中的images是File对象 #

你的onDrop函数里用Object.assign(file, { preview: URL.createObjectURL(file) })给File对象添加了preview属性，这没问题，因为修改后的对象仍然保留了File的所有原生属性，FormData可以正确识别它。

修改完上面的步骤后，应该就能解决MulterError: Unexpected field的问题了。

内容的提问来源于stack exchange，提问作者Alejandro Otero Gómez