Node.js中MulterError: Unexpected field错误求助及代码排查

将图片存入SQL数据库时触发MulterError: Unexpected field错误，相同逻辑在其他场景可正常运行，求解决办法。

前端HTML代码 #

<label id="divisionIdLabel" for="divisionIdInput">Division Name:</label>
<input type="text" id="divisionIdInput" name="divisionId" aria-labelledby="divisionIdLabel">

<label id="imageLabel" for="imageInput">Image:</label>
<input type="file" id="imageInput" name="image" aria-labelledby="imageLabel">

前端JS代码 #

let forms = document.querySelectorAll('form');
let divisionIdInput = form.querySelector('#divisionIdInput');
let imageInput = form.querySelector('#imageInput');

formData.append('image', imageInput.files[0], imageInput.files[0].name);

const divisionId = divisionIdInput.value;
fetch(`/divisionData/${divisionId}`, {
  method: 'POST',
  body: formData,
})
  .then(response => {
    if (!response.ok) throw new Error('Error inserting data');
    return response.text();  // Read the response as text
  })
  .then(responseText => {
    console.log('Response from server:', responseText);
  })
  .catch(error => {
    console.error('Error:', error);
  });

后端Node.js代码 #

app.post('/divisionData/:divisionId', upload.single('image'), (req, res) => {
    const image = req.file.buffer;
    const contentType = req.file.mimetype;
    const { divisionId } = req.body;

    // Check if any of the values are null
    if (divisionId === undefined || image === undefined) {
        res.send('All fields must have values.');
        return;
    }

    const insert_user_query = "INSERT INTO divisions (divisionId, image, contentType) VALUES (?, ?, ?)";
    const values = [divisionId, image, contentType];
    conn.query(insert_user_query, values, (err, result) => {
        if (err) {
            console.error("Database error:", err);
            return res.json({ error: "Failed while inserting data into database! Try to send files again." });
        }

        return res.json({ success: true });
    });
});

错误现象 #

• 客户端控制台显示：POST http://localhost:8081/divisionData/(输入的divisionId) 500 (Internal Server Error) 及 Error: Error inserting data at homeSettings.js:31:37
• 服务器控制台输出：MulterError: Unexpected field

解决方案 #

1. 修复FormData初始化问题 #

前端JS代码中缺少FormData的初始化语句，添加以下代码创建FormData实例：

const formData = new FormData();

2. 阻止表单默认提交行为 #

如果表单绑定了提交事件，需阻止浏览器默认提交逻辑，避免重复发送请求或额外字段：

forms.forEach(form => {
  form.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    // 原有的FormData处理和fetch请求代码放在这里
  });
});

3. 统一divisionId的传递方式 #

你当前同时通过URL参数和请求体传递divisionId，但前端未将divisionId加入FormData，导致后端req.body.divisionId为空。建议直接从URL参数获取：

// 后端代码中替换原有的req.body.divisionId
const divisionId = req.params.divisionId;

4. 避免字段重复提交 #

如果使用new FormData(form)自动收集表单数据，会自动包含所有表单字段，此时无需手动appendimage，否则会导致字段重复触发Multer错误。二选一即可：

• 手动添加字段：

  const formData = new FormData();
  formData.append('image', imageInput.files[0], imageInput.files[0].name);
  formData.append('divisionId', divisionIdInput.value); // 若后端从req.body获取则添加
  

• 自动收集表单数据：

  const formData = new FormData(form); // 自动包含所有表单字段
  

5. 确保Multer配置正确 #

若需读取req.file.buffer，需配置Multer使用内存存储：

const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

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