Multer+Express+Typescript中req.files未定义，图片上传失败求助

后端排查要点 #

1. 确认Multer配置正确性
   确保已正确初始化Multer并指定存储路径，且文件夹存在、权限正常：

   const multer = require('multer');
   const fs = require('fs');
   const uploadDir = './images';
   
   // 自动创建目标文件夹（避免不存在导致上传失败）
   if (!fs.existsSync(uploadDir)) {
     fs.mkdirSync(uploadDir, { recursive: true });
   }
   
   const storage = multer.diskStorage({
     destination: (req, file, cb) => cb(null, uploadDir),
     filename: (req, file, cb) => cb(null, `${Date.now()}-${file.originalname}`)
   });
   const upload = multer({ storage: storage });
   

   路由中要确保upload.array中间件在处理函数之前：

   router.post('/products', upload.array('images', 5), (req, res) => {
     if (!req.files) {
       console.log("No files");
       return res.status(400).send("No files uploaded");
     }
     // 后续业务逻辑
   });
   

2. 检查中间件顺序
   禁止在文件上传路由前使用express.json()或express.urlencoded()中间件，这类中间件会消耗multipart/form-data请求体，导致Multer无法读取文件：

   // 错误示例：先解析JSON会覆盖multipart数据
   app.use(express.json());
   app.use('/api', productRouter);
   
   // 正确示例：文件上传路由单独处理，其他路由用JSON解析
   app.use('/api/other-routes', express.json());
   app.use('/api/products', productRouter);
   

前端排查要点 #

1. FormData构造必须匹配后端字段名
   确保FormData中追加的文件字段名与后端upload.array('images',5)的images完全一致：

   const handleSubmit = (e) => {
     e.preventDefault();
     const formData = new FormData();
     // 假设files是从<input type="file" multiple>获取的文件数组
     files.forEach(file => {
       formData.append('images', file); // 字段名必须为'images'
     });
     // 追加其他表单数据（如果有）
     formData.append('productName', productName);
     // 调用mutation提交
     createProduct(formData);
   };
   

2. 不要手动设置Content-Type
   浏览器会自动为FormData生成带边界标识的multipart/form-data头，手动设置会导致解析失败：

   // 错误示例：手动设置Content-Type
   const [createProduct] = useCreateProductMutation({
     headers: { 'Content-Type': 'multipart/form-data' }
   });
   
   // 正确示例：依赖浏览器自动处理
   const [createProduct] = useCreateProductMutation();
   

3. RTK Query配置注意事项
   若使用RTK Query的useMutation，需确保query中直接传递FormData，不做序列化处理：

   // 示例mutation定义
   createProduct: builder.mutation({
     query: (formData) => ({
       url: '/api/products',
       method: 'POST',
       body: formData, // 直接传入FormData
     }),
   }),
   

4. 验证文件输入的name属性
   确保文件输入框的name属性与后端字段名一致：

   <input type="file" multiple name="images" onChange={handleFileChange} />
   

最后验证 #

在浏览器DevTools的Network标签中查看请求的Form Data部分，确认文件是否被正确包含。如果Form Data中无文件，优先排查前端FormData构造逻辑；若文件存在但后端仍拿不到，重点检查后端Multer配置和中间件顺序。

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