如何在Node.js中基于用户选择通过Multer设置不同上传路径

不需要额外发送单独的POST请求，直接在同一次上传请求中携带分类信息即可，以下是两种可行的实现方案：

方案1：通过Form Data携带分类信息 #

前端将用户选择的分类和图片文件一起放入FormData中提交，后端通过req.body获取分类，动态生成上传路径。

前端代码示例 #

// 原生JS示例
const fileInput = document.getElementById('image-input');
const categorySelect = document.getElementById('category-select');

document.getElementById('upload-btn').addEventListener('click', () => {
  const formData = new FormData();
  formData.append('category', categorySelect.value); // 用户选择的分类
  formData.append('image', fileInput.files[0]); // 待上传的图片

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(res => res.json())
    .then(data => console.log(data.message));
});

后端代码示例 #

const multer = require('multer');
const path = require('path');
const fs = require('fs');
const express = require('express');
const app = express();

// 自定义存储引擎，动态设置上传目录
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 从请求体获取分类参数
    const category = req.body.category;
    
    // 校验分类合法性，防止目录遍历漏洞
    const allowedCategories = ['风景', '人物', '美食'];
    if (!allowedCategories.includes(category)) {
      return cb(new Error('无效的分类'));
    }

    // 拼接目标文件夹路径
    const uploadDir = path.join(__dirname, 'uploads', category);
    // 文件夹不存在则创建
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 自定义文件名，避免重复
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

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

// 上传接口
app.post('/upload', upload.single('image'), (req, res) => {
  res.json({
    message: '上传成功',
    savePath: req.file.path
  });
});

app.listen(3000, () => console.log('服务启动在3000端口'));

方案2：通过URL参数携带分类信息 #

将分类作为URL的查询参数传递，后端通过req.query获取分类值。

前端代码示例 #

const formData = new FormData();
formData.append('image', fileInput.files[0]);

// 把分类拼在URL的查询参数里
fetch(`/upload?category=${categorySelect.value}`, {
  method: 'POST',
  body: formData
}).then(res => res.json())
  .then(data => console.log(data.message));

后端修改点 #

只需调整destination中的分类获取方式：

destination: (req, file, cb) => {
  const category = req.query.category;
  // 后续校验、创建文件夹逻辑同方案1
  // ...
}

关键注意事项 #

• 必须对分类参数做合法性校验，禁止用户传入../这类路径字符，避免目录遍历攻击。
• Multer会自动解析multipart/form-data类型的请求，无需额外配置body-parser。

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