使用multer-cloudinary-storage上传文件时提示“No file uploaded”求助

尝试使用CloudinaryStorage（Multer引擎）直接将图片上传至云端，避免先存储到服务器，但每次发起请求时，响应都显示“No file uploaded”。已确认Cloudinary配置正确，使用的包版本如下：

• multer: ^1.4.2
• cloudinary: ^1.27.0
• multer-storage-cloudinary: ^4.0.0

代码实现如下：

const express = require('express');
const multer = require('multer');
const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');

const app = express(); 

cloudinary.config({
  cloud_name: 'Scribe',
  api_key: 'abc',
  api_secret: 'def',
});

const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    allowed_formats: ['jpg', 'png', 'jpeg'], 
  },
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), (req, res) => {
  console.log('req body after parsing:', req.body);
  console.log('req file:', req.file);
  if (!req.file) {
    return res.status(400).json("No file uploaded");
  }
  res.json({ url: req.file.path });
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

从代码逻辑和常见问题来看，大概率是请求端或代码配置细节问题，而非包本身的问题，可按以下步骤逐一排查：

1. 校验请求格式与字段名

   • 前端请求必须使用multipart/form-data类型，不能用application/json或application/x-www-form-urlencoded。
   • 上传字段名要和upload.single('image')中的image完全匹配，前端FormData需写为formData.append('image', 选中的文件对象)。

2. 检查请求体解析冲突

   • 确保没有在multer中间件之前添加会消耗请求体的中间件（比如express.raw()、express.text()），否则multer无法读取到文件数据。

3. 优化Cloudinary配置细节

   • Cloudinary的cloud_name通常为全小写，你配置中的'Scribe'建议改为小写测试，避免大小写匹配问题。
   • 添加错误监听捕获Cloudinary端的异常：

     const storage = new CloudinaryStorage({
       cloudinary: cloudinary,
       params: {
         allowed_formats: ['jpg', 'png', 'jpeg'], 
       },
     });
     // 捕获存储层错误
     storage.on('error', (err) => {
       console.error('Cloudinary存储错误:', err);
     });
     

4. 用工具直接测试请求

   • 用Postman或curl绕开前端直接测试，排除前端代码问题：

     curl -X POST -F "image=@本地图片路径" http://localhost:3000/upload
     

   • Postman操作：选择POST请求，Body选form-data，Key填image，类型选File，选择本地图片后发送请求，查看服务器日志和返回结果。

5. 添加multer错误捕获

   • 扩展multer的错误处理逻辑，捕获隐藏的上传异常（如格式不兼容、文件超限等）：

     app.post('/upload', (req, res, next) => {
       upload.single('image')(req, res, (err) => {
         if (err) {
           console.error('Multer上传错误:', err);
           return res.status(500).json(err.message);
         }
         next();
       });
     }, (req, res) => {
       console.log('解析后的请求体:', req.body);
       console.log('上传的文件:', req.file);
       if (!req.file) {
         return res.status(400).json("No file uploaded");
       }
       res.json({ url: req.file.path });
     });
     

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