Multer无法识别multipart/form-data请求 接口req.file为undefined

问题根因 #

• 最常见诱因是Axios请求头配置错误：手动设置Content-Type: multipart/form-data时，浏览器不会自动拼接multipart协议必需的boundary分隔符参数，Multer解析请求时找不到文件分割边界，自然无法识别上传的文件。这也是Insomnia调试正常的原因——接口测试工具会自动生成带正确boundary的请求头。
• 小概率诱因是传入的croppedImage不符合Web文件API规范，不是标准的File/Blob对象（比如裁剪组件输出的是普通JS对象、base64字符串）。

修复步骤 #

• 修改Axios请求配置，删除手动设置的Content-Type头
  浏览器识别到请求体是FormData对象时，会自动设置匹配的请求头、生成合法的boundary参数，不需要手动配置。修改后的客户端代码参考：

  const handleSubmit = async (croppedImage: any) => {
      const formData = new FormData();
      formData.append('file', croppedImage);
      formData.append('name', croppedImage.name)
  
      api.post(
          '/firebase',
          formData
          // 移除原有的headers配置，不要手动指定Content-Type
      )
      .then(() => console.log('Success'))
      .catch(e => console.error(e))
  }
  

• 校验上传对象类型，必要时转换为标准File对象
  如果使用了图片裁剪类组件，很多组件默认返回Canvas导出的Blob对象或者base64字符串，这类数据直接append到FormData里无法被Multer识别，需要先转成标准File对象，转换示例：

  // 当croppedImage为Blob类型时，用以下逻辑转成File
  const imageFile = new File(
      [croppedImage], 
      croppedImage.name || 'upload.png', 
      { type: 'image/png', lastModified: Date.now() }
  );
  formData.append('file', imageFile);
  

• 优化Multer冗余配置（可选）
  当前配置中在destination、filename回调里判断!file属于多余逻辑：这两个回调只有在Multer识别到有效文件、通过fileFilter校验后才会触发，这里的判断反而可能在异常场景抛出无意义错误，保留fileFilter中的PNG格式校验即可。

验证方法 #

修改完成后打开浏览器开发者工具，切换到网络面板找到上传请求，查看请求头中Content-Type的取值，正确格式应为：
multipart/form-data; boundary=----WebKitFormBoundary[随机字符串]
只要携带了boundary参数，Multer就能正常解析上传文件，req.file不会再返回undefined。

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