Vue前端指定目录，Node.js中Multer上传文件req.body.idUser未定义问题

问题根源 #

Multer的diskStorage配置里的destination/filename回调，执行时机早于Multer解析请求体（req.body）。也就是说，当Multer准备确定文件存储目录时，请求里的表单字段还没被解析到req.body中，所以此时req.body.idUser是undefined；而后续app.post的回调能拿到，是因为Multer已经完成了整个请求体的解析。

可行解决方案 #

方案1：将idUser放在URL路径参数中

这是最直接的解决方式，因为URL参数在请求到达时就已被Express解析，Multer的回调可以直接获取。

• 前端请求调整：
  把idUser拼入请求URL，比如原本的/upload改成/upload/123（123是实际的idUser值），Vue中示例代码：

  const idUser = this.getIdUser();
  axios.post(`/upload/${idUser}`, formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
  

• 后端代码调整：

  1. 修改路由，添加路径参数：

     app.post('/upload/:idUser', upload.single('file'), (req, res) => {
       res.send('文件上传成功');
     });
     

  2. 在Multer的diskStorage中使用req.params.idUser：

     const storage = multer.diskStorage({
       destination: (req, file, cb) => {
         const userId = req.params.idUser;
         const uploadDir = `./uploads/${userId}`;
         // 自动创建不存在的目录
         fs.mkdirSync(uploadDir, { recursive: true });
         cb(null, uploadDir);
       },
       filename: (req, file, cb) => {
         cb(null, Date.now() + '-' + file.originalname);
       }
     });
     const upload = multer({ storage: storage });
     

方案2：将idUser放在请求头中

如果不想修改URL，也可以把idUser放在请求头里，Multer的回调能直接读取请求头。

• 前端请求调整：

  const idUser = this.getIdUser();
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      'X-User-ID': idUser
    }
  });
  

• 后端代码调整：
  在destination回调中读取请求头：

  const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      const userId = req.headers['x-user-id'];
      const uploadDir = `./uploads/${userId}`;
      fs.mkdirSync(uploadDir, { recursive: true });
      cb(null, uploadDir);
    },
    filename: (req, file, cb) => {
      cb(null, Date.now() + '-' + file.originalname);
    }
  });
  

注意事项 #

• 要对idUser做合法性校验，过滤掉../这类可能引发目录遍历攻击的字符，确保存储目录安全。
• 使用fs.mkdirSync时加上{ recursive: true }，可以自动创建多级父目录，避免因目录不存在导致上传失败。

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