使用Multer访问req.files时出现TypeScript错误，求解决方法

问题根源 #

TypeScript自带的Express Request类型里，req.files的类型是模糊的——可能是按字段名分组的对象，也可能是文件数组，还可能是undefined。但你用了upload.array('image')中间件后，req.files实际只会是File[]或undefined，可惜TS没法自动识别中间件带来的类型变化，所以访问length和索引时就会触发类型不兼容错误。

具体解决方法 #

方法1：用类型守卫做安全校验（最稳妥） #

在原来的!req.files判断后面，再加一层数组类型校验，让TS明确知道req.files是数组：

app.post('/api/upload/images', [upload.array('image')], async (req: Request, res: Response) => {
  try {
    // 加个Array.isArray判断，缩小类型范围
    if (!req.files || !Array.isArray(req.files)) {
      throw new ErrorException(500, 'Es ist ein Fehler beim Hochladen eines oder mehreren Bildern aufgetreten. Versuchen Sie es erneut.');
    }

    for(let i = 0; i < req.files.length; i++) {
      const file = req.files[i];
      const base64EncodedImage = Buffer.from(file.buffer).toString("base64")
      const dataUri = `data:${file.mimetype};base64,${base64EncodedImage}`
      
      const response = await cloudinary.uploader.upload(dataUri, { folder: '/test2' });
      console.log(response);
    }
    return res.status(201).json({});
  } catch(e) {
    return res.status(500).json({err:'err'});
  }
});

Array.isArray(req.files)会让TS自动把req.files的类型缩小为File[]，后续访问length和索引就不会报错了。

方法2：直接用类型断言（快速解决） #

如果你能确定upload.array('image')中间件已经保证了非undefined的req.files一定是数组，可以直接用类型断言强制指定类型：

app.post('/api/upload/images', [upload.array('image')], async (req: Request, res: Response) => {
  try {
    if (!req.files) {
      throw new ErrorException(500, 'Es ist ein Fehler beim Hochladen eines oder mehreren Bildern aufgetreten. Versuchen Sie es erneut.');
    }

    // 断言为Multer的文件数组类型
    const files = req.files as Express.Multer.File[];
    for(let i = 0; i < files.length; i++) {
      const file = files[i];
      const base64EncodedImage = Buffer.from(file.buffer).toString("base64")
      const dataUri = `data:${file.mimetype};base64,${base64EncodedImage}`
      
      const response = await cloudinary.uploader.upload(dataUri, { folder: '/test2' });
      console.log(response);
    }
    return res.status(201).json({});
  } catch(e) {
    return res.status(500).json({err:'err'});
  }
});

方法3：扩展Express Request类型（长期项目推荐） #

在项目里建一个类型定义文件（比如src/types/express.d.ts），扩展Express的Request接口，一劳永逸解决类型问题：

declare global {
  namespace Express {
    interface Request {
      files?: Express.Multer.File[];
    }
  }
}

这样所有使用Multer数组上传的路由里，req.files都会被TS识别为Express.Multer.File[] | undefined，不用每次都单独处理类型。

总结 #

• 临时快速修复用类型断言
• 追求代码安全性用类型守卫
• 长期维护的项目优先选扩展Express类型

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