MERN栈应用更新数据时FormData为空，求原因排查

问题描述 #

开发MERN栈应用时，执行数据更新操作发现FormData为空。已获取annee、name、desc、file等参数传入UpdateModule函数并添加到FormData，但控制台直接打印FormData显示为空，单独打印各参数值均正常。

客户端代码 #

// file is empty not selected from the input 
const UpdateModule = async (annee, name, file, desc, id) => {
    const data = new FormData();
    data.append('annee', annee);
    data.append('name', name);
    data.append('desc', desc);
    if (file) {
      data.append('file', file);
    }
    console.log('FormData:', data); // here is empty
    // all the log below are not empty!
    console.log('annee:', annee);
    console.log('name:', name);
    console.log('desc:', desc);
    console.log('file:', file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data',
        'accept': 'application/json'
      }
    };
    await axios.patch('http://localhost:5000/api/module/'+id,data,config).then(res => {
      setLoadingUpdate(false)
      setSuccessUpdate(true)
      setErrorUpdate(false)
    }).catch(error => {
      console.log(error.message)
      console.log(error.response.data)
      setErrorUpdate(error.response.data)
      setSuccessUpdate(false)
      setLoadingUpdate(false)
    })
  }

服务端代码 #

const EditModule = async (req, res) => {
    try {
        const { id } = req.params
        const data = req.body
        const module = await Modules.findById(id)
        consol.log(data)
        console.log(module)
        if (!module) {
            return res.status(400).send('module not found')
        }
        const moduleUpdated = await Modules.findByIdAndUpdate(id, data, { new: true })
        console.log(moduleUpdated)
        res.status(201).json(moduleUpdated)
    } catch (error) {
        console.log(error.message)
    }
}

原因分析 #

1. FormData直接打印的特性限制
   FormData对象是迭代器结构，直接用console.log打印只会显示空对象外壳，无法看到内部键值对。必须通过遍历或entries()方法才能查看内容：

   // 正确查看FormData内容的方式
   for (let [key, value] of data.entries()) {
     console.log(`${key}:`, value);
   }
   

2. Axios手动设置Content-Type的错误
   发送FormData时，Axios会自动生成包含边界符（boundary）的multipart/form-data请求头。手动设置该头会丢失边界符，导致服务端无法解析FormData，最终req.body为空。

3. 服务端缺少multipart/form-data解析中间件
   Express默认不支持解析multipart/form-data类型请求，必须使用multer中间件处理FormData和文件上传。当前服务端未配置该中间件，无法获取请求中的数据。

4. 服务端代码拼写错误
   服务端代码中consol.log(data)存在拼写错误，应为console.log(data)，会导致运行时错误，影响后续逻辑执行。

解决方案 #

客户端修改 #

• 移除手动设置的content-type，让Axios自动处理请求头：

  const config = {
    headers: {
      'accept': 'application/json'
    }
  };
  

• 使用遍历方式查看FormData内容，替代直接打印对象。

服务端修改 #

1. 安装并配置multer中间件：

   npm install multer
   

   在路由文件中引入并配置：

   const multer = require('multer');
   // 若无需存储文件，用upload.none()解析仅含字段的FormData；若需处理文件，用upload.single('file')
   const upload = multer();
   
   // 在路由中添加中间件
   router.patch('/module/:id', upload.none(), EditModule);
   

2. 修正拼写错误：将consol.log(data)改为console.log(data)。
3. 若涉及文件上传，需调整multer配置指定文件存储路径，通过req.file获取文件信息，req.body获取其他字段。

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