使用Multer时创建目录并切换至该目录上传文件

React端修正参数传递问题 #

你当前的Axios请求错误地将表单字段放在了config参数里，multipart/form-data格式下，所有字段（包括普通文本和文件）都需要通过FormData传递：

修改propertyInfoHandler函数：

const propertyInfoHandler = () => {
    const url = 'http://localhost:3001/property/properties_upload';
    const data = new FormData() 

    // 添加选中的文件
    for (var x = 0; x < selectedFile.length; x++) {
        data.append('files', selectedFile[x]);
    }
    // 将表单字段加入FormData
    data.append('addressLine', addressLine);
    data.append('addressLine2', addressLine2);
    data.append('addressCity', addressCity);
    data.append('addressState', addressState);
    data.append('addressZipCode', addressZipCode);
    data.append('mlsID', mlsID);

    Axios.post(url, data)
    .then((response) => {
        navigate('/properties');
        if (response.data.errorMessage){
            setErrorMessage(response.data.message);
        }
    })
    .catch(err => {
        setErrorMessage('上传失败，请重试');
        console.error(err);
    });
};

Node.js端动态创建目录并上传 #

需要引入fs模块处理目录创建，同时修改Multer的配置，根据用户输入动态生成目标文件夹：

1. 引入fs模块 #

在文件顶部添加：

const fs = require('fs');

2. 修改Multer存储配置 #

将固定目标路径改为动态生成，这里用唯一的mlsID作为目录名（避免地址含特殊字符导致的路径问题）：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 拼接目标目录路径
    const targetDir = path.join('./routes/Images/', req.body.mlsID);
    // 递归创建目录（不存在则自动生成）
    fs.mkdirSync(targetDir, { recursive: true });
    cb(null, targetDir);
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname );
  }
});
const upload = multer({ storage: storage }).array('files');

3. 简化路由逻辑 #

现在req.body能正确获取到表单字段，路由可以简化为：

router.post('/properties_upload', (req, res) => {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
        return res.status(500).json({error: err.message});
    } else if (err) {
        return res.status(500).json({error: err.message});
    }

    console.log('文件已上传至:', req.files[0].destination);
    // 这里可添加数据库存储逻辑，比如记录文件路径和房产信息
    return res.status(200).json({files: req.files, message: '上传成功'});
  });
});

关键注意事项 #

• 路径安全：如果选择用地址作为目录名，务必先过滤特殊字符（如替换空格为下划线、移除/等），避免路径遍历攻击；用mlsID这类唯一标识更安全。
• 目录创建：fs.mkdirSync的recursive: true参数会自动创建多级父目录，无需手动判断目录是否存在。

替代方案 #

如果不想使用Multer，可以选择busboy库处理文件上传，它更轻量，支持自定义文件处理逻辑，但需要手动实现文件写入和目录创建，代码复杂度会更高。

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