React+Node+MongoDB视频上传报uncaught(in promise)500错误求解

注：前端控制台抛出的uncaught (in promise) error是Axios未捕获接口异常的通用提示，核心问题在服务端链路，按以下顺序排查即可

• 先校验前端请求格式是否正确
  视频上传必须用FormData封装请求体，绝对不能手动设置请求头的Content-Type为multipart/form-data，必须让浏览器自动拼接boundary参数，否则后端文件解析中间件会直接解析失败抛错。正确前端请求示例：

  const uploadVideo = async (file) => {
    const formData = new FormData()
    formData.append('videoFile', file)
    // 其他业务字段比如标题、描述、分类直接append到formData即可
    const res = await axios.post('/api/video/upload', formData, {
      headers: {
        // 仅保留需要的鉴权头，不要写Content-Type
        Authorization: `Bearer ${localStorage.getItem('token')}`
      },
      // 大视频上传可以加进度回调
      onUploadProgress: (e) => console.log('上传进度', (e.loaded/e.total)*100)
    })
    return res.data
  }
  

• 排查Node端文件解析中间件配置
  Node服务处理文件上传最常用multer中间件，80%的上传500错误都来自这部分配置失误：

  高频错误点：

  1. 中间件配置的文件字段名和前端append的key不匹配，比如后端写upload.single('file')，前端传的key是videoFile
  2. 默认文件大小限制远小于视频体积，multer默认单文件上限仅1MB，超过就直接抛异常
  3. 本地临时存储目录、存储桶写入权限未开放，文件写入时触发权限错误
     可用的基础配置参考：

  const multer = require('multer')
  // 直传对象存储场景直接用内存存储，不需要落本地磁盘减少IO消耗
  const upload = multer({
    storage: multer.memoryStorage(),
    limits: {
      fileSize: 1024 * 1024 * 500 // 按需调整，这里是放开到500MB上限
    }
  })
  // 路由处的字段名必须和前端完全一致
  app.post('/api/video/upload', upload.single('videoFile'), async (req, res) => {
    // 后续上传存储桶逻辑写在这里
  })
  

• 排查媒体存储桶上传逻辑
  存储桶链路的未捕获异常是第二大触发500的原因，重点检查：
  1. 存储桶SDK的密钥、区域、桶名配置是否正确，有没有拼写错误
  2. 存储桶CORS规则是否放开了前端域名的POST/PUT请求权限
  3. 上传时必须正确设置ContentType为视频对应的MIME值（比如video/mp4），否则不仅后续流式播放会失败，部分存储桶会直接拦截不符合类型规则的请求
  4. 存储桶操作必须加try/catch捕获异常，不要让错误直接抛给框架，同时把错误打在服务端日志方便定位：

  try {
    await s3Client.send(new PutObjectCommand({
      Bucket: '你的存储桶名称',
      Key: `videos/${Date.now()}-${req.file.originalname}`,
      Body: req.file.buffer,
      ContentType: req.file.mimetype,
      // 流式播放需要的基础配置
      ACL: 'public-read',
      CacheControl: 'public, max-age=31536000'
    }))
  } catch (err) {
    // 控制台打印完整错误栈，直接就能看到具体报错原因
    console.error('存储桶上传失败：', err)
    return res.status(500).json({ code: 500, msg: '视频上传失败' })
  }
  

• 校验流式播放前置依赖
  如果你的上传逻辑包含视频转码、HLS切片步骤，先确认服务端是否正确安装了ffmpeg等转码依赖，依赖缺失触发的子进程启动错误也是常见的500诱因。

快速定位技巧 #

不用死磕代码猜问题，直接打开浏览器F12网络面板，找到对应上传请求的「响应」标签，就能看到服务端返回的具体错误信息；如果响应为空，直接看Node服务运行的控制台日志，未捕获的异常会打印完整错误栈，顺着栈找对应代码行几分钟就能解决问题。

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