使用Multer实现文件上传时遭遇Unexpected field错误求助

错误原因 #

这个错误核心是前端发送的文件字段名和后端Multer配置的字段不匹配，同时后端转发API的逻辑也存在错误。

修复步骤 #

1. 核对前后端字段名

后端用upload.single('featuredImage')指定了只接收名为featuredImage的单个文件，前端必须确保：

• HTML表单中文件输入框的name属性为featuredImage：<input type="file" name="featuredImage">
• 如果用JavaScript的FormData发送，字段名要一致：formData.append('featuredImage', 选中的文件对象)

如果前端传的字段名不是featuredImage，Multer就会抛出"Unexpected field"错误。

2. 修复后端转发API的逻辑

你的后端代码里用axios转发时直接传了upload对象，这是错误的。Multer解析后的文件信息存在req.file中，需要用form-data模块构建正确的表单数据再发送给第三方API。

修改后的完整代码示例：

const express = require('express')
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })
const app = express()
const singleUpload = upload.single('featuredImage');
const bodyParser = require('body-parser')
const cookieParser = require('cookie-parser')
const cors = require('cors');
const axios = require("axios");
const FormData = require('form-data'); // 需先安装：npm install form-data

app.use(bodyParser.json())
app.use(cookieParser())
app.use(cors()); // 启用CORS解决跨域问题

app.post('/uploads', singleUpload, async (req, res) => {
  try {
    // 构建符合要求的FormData
    const formData = new FormData();
    // 将Multer解析后的文件添加到表单中，字段名需匹配第三方API要求
    formData.append('featuredImage', req.file.buffer, {
      filename: req.file.originalname,
      contentType: req.file.mimetype
    });

    // 发送请求到第三方API，用formData的headers自动处理boundary
    const result = await axios.post('http://api.com/api/public/nuxt', formData, {
      headers: formData.getHeaders()
    });

    console.log('SUCCESS!!!!!!!!!!!');
    console.log(result.data);
    return res.json({ status: "success" })
  } catch (err) {
    console.log('FAILURE!!!!1!!!!');
    console.error(err);
    return res.status(500).json({ status: "error", message: err.message })
  }
})

module.exports = app

其他排查点 #

• 如果前端需要上传多个文件，不要用upload.single()，改用upload.array('字段名', 数量)或upload.fields([{name: '字段1'}, {name: '字段2'}])
• 确保没有在Multer之前用其他中间件处理multipart/form-data请求，Multer会自行解析这类请求

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