React使用FormData上传文件触发ERR_INVALID_ARG_TYPE错误如何解决？

你遇到的TypeError [ERR_INVALID_ARG_TYPE]报错本质是后端无法正确解析前端上传的FormData数据，预期拿到字符串类型的参数时实际获取到了undefined导致的，按以下步骤排查修复即可：

1. 移除axios手动配置的Content-Type请求头 #

不要手动设置multipart/form-data类型的请求头，该请求头必须附带浏览器自动生成的boundary边界标识才能让后端正确拆分FormData里的不同字段，你手动配置该头会覆盖掉自动生成的带boundary的合法头，直接删除axios配置里的{headers : {"Content-Type" : "multipart/form-data"}}即可，axios检测到请求体是FormData类型时会自动补充正确的请求头。

2. 修正后端上传路由的配置 #

你目前贴出的后端代码存在两处明显问题：

• 路由路径不匹配：前端调用的是/tickets/upload接口，但你贴出的后端路由是根路径/，如果该路由挂载在/tickets前缀下，实际对应的是/tickets接口，和你调用的上传接口不一致，先确认上传接口的路径配置正确。
• 未挂载multer中间件解析文件：使用multer处理文件上传时，必须将multer作为中间件挂载到对应上传路由上，才能解析FormData中的文件字段，参考正确配置：

const multer = require('multer');
// 配置文件存储规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads') // 替换为你自己的文件存储目录
  },
  filename: function (req, file, cb) {
    const fileName = Date.now() + file.originalname
    cb(null, fileName)
  }
})
const upload = multer({ storage: storage })

// 上传路由挂载multer中间件，指定接收的文件字段名为file
router.post('/upload', upload.single('file'), async (req, res) => {
  if (req.user) {
    try {
      // 文件数据存储在req.file中，其他FormData字段存储在req.body中
      const newTicket = new Ticket({
        ...req.body,
        // 按需补充文件相关字段，比如存储路径、文件名等
        fileUrl: `/uploads/${req.file.filename}`
      })
      const ticket = await newTicket.save()
      res.status(201).json(ticket)
    } catch (err) {
      res.status(500).json(err)
    }
  } else {
    res.status(403).json('You are not allowed to create a ticket')
  }
})

注意你原来的403提示文案逻辑写反了，应该是not allowed

3. 确认前端newFile参数的类型正确 #

确保你使用的newFile是File类型对象，如果你是通过<input type="file" />选择的文件，应该取input元素.files[0]作为newFile的值，不要传入文件路径、文件名等其他类型的值。

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