Node.js中URL参数传文件上传首次请求失败问题求助

问题代码 #

前端Fetch请求：

const response = await fetch(`http://${serversIP}/upload/${encodeURIComponent(saveMediaPath)}`, {
   method: 'POST',
   body: formData,
   headers: {
     'Content-Type': 'multipart/form-data',
   }
 }); 

后端Multer配置：

const storage = multer.diskStorage({
   destination: (req, file, cb , err) => {
       let savePath = imagesDir
       if(req.params.filePath!="startPoint"){
           savePath = path.join(imagesDir,req.params.filePath)
       }
       cb(null, savePath); // Save all files to the 'images' directory
   },
   filename: (req, file, cb) => {
       cb(null, Date.now() + path.extname(file.originalname));
   }
});

核心排查方向 #

1. 移除手动设置的Content-Type头

当Fetch的body是FormData时，绝对不要手动设置multipart/form-data头。浏览器会自动生成包含boundary的正确请求头，手动设置会覆盖这个边界值，导致后端Multer无法解析表单数据，这是这类问题最常见的诱因。

修改后前端代码：

const response = await fetch(`http://${serversIP}/upload/${encodeURIComponent(saveMediaPath)}`, {
  method: 'POST',
  body: formData
});

2. 修复Multer的destination回调参数错误并确保目录存在

你写的destination回调多了一个无效的err参数，正确的参数签名是(req, file, cb)，多余参数会导致回调逻辑异常。同时，首次请求失败大概率是因为目标目录不存在，后续请求可能因其他操作间接创建了目录才成功，所以必须在回调里主动创建目录。

修改后后端代码（需引入fs模块）：

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    let savePath = imagesDir;
    // 解码前端编码后的URL参数，避免路径被转义破坏
    const targetPath = decodeURIComponent(req.params.filePath);
    if (targetPath !== "startPoint") {
      savePath = path.join(imagesDir, targetPath);
    }
    // 递归创建目录，确保路径存在
    fs.mkdir(savePath, { recursive: true }, (err) => {
      if (err) return cb(err);
      cb(null, savePath);
    });
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

3. 验证URL参数的解码逻辑

前端用encodeURIComponent编码路径后，后端req.params.filePath拿到的是转义后的字符串（比如subdir/imgs会变成subdir%2Fimgs），直接用path.join会生成错误的目录名，必须先解码才能得到正确的路径结构。

4. 检查后端初始化顺序

确认imagesDir在首次请求时已经被正确赋值。如果imagesDir是通过异步操作（比如读取配置文件）获取的，可能首次请求时还未初始化完成，导致路径错误。可以在destination回调里打印imagesDir和savePath的值，对比首次和后续请求的差异。

5. 跨域预检请求处理

如果是跨域场景，浏览器首次请求会发送OPTIONS预检请求。确保后端配置了CORS，允许OPTIONS方法，并且允许对应的请求头（如果有）。比如使用cors中间件时，要设置optionsSuccessStatus: 200并明确允许POST、OPTIONS方法。

内容的提问来源于stack exchange，提问作者Γιώργος ΟΙΚ