React产品表单图片上传失败：无法保存至MongoDB及目录错误

核心问题分析 #

错误提示Error: ENOENT: no such file or directory, open 'C: \server\uploads\1722650646291-weg-electric-motors.svg'说明multer尝试写入的路径不存在，根源在于：

• 项目结构中uploads与server同级，但后端代码中multer的存储路径指向了server/routes/uploads（__dirname代表当前文件所在的routes目录）
• 未导入path模块，导致路径拼接逻辑失效
• 静态文件服务的路径配置错误，无法访问同级的uploads目录

分步修复 #

1. 修复ProductRoutes.js的路径问题 #

步骤1：导入path模块

在文件顶部添加：

const path = require('path');

步骤2：修正multer存储路径

将multer的storage配置中的destination改为：

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 从routes目录向上跳转两级，指向server同级的uploads目录
        const uploadPath = path.join(__dirname, '../../uploads');
        cb(null, uploadPath);
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

更可靠的写法是用process.cwd()直接获取项目根目录：

const uploadPath = path.join(process.cwd(), 'uploads');

2. 修正Server.js的静态文件服务路径 #

将静态文件服务配置修改为：

// 指向server同级的uploads目录
app.use('/uploads', express.static(path.join(__dirname, '../uploads')));

注意：需要在Server.js顶部也导入path模块：

const path = require('path');

3. 验证前后端字段映射一致性 #

检查前端FormData的键与后端Product模型字段是否匹配：

• 前端append的name对应后端模型的name字段
• description对应description、specifications对应specifications等
  确保Product模型包含对应字段，示例：

// models/Product.js
const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
    name: String,
    description: String,
    specifications: String,
    accessories: String,
    condition: String,
    images: [String]
});

module.exports = mongoose.model('Product', productSchema);

4. 自动创建uploads目录（可选） #

避免手动创建遗漏，在ProductRoutes.js的storage配置前添加目录检查：

const fs = require('fs');
const uploadPath = path.join(process.cwd(), 'uploads');
if (!fs.existsSync(uploadPath)) {
    fs.mkdirSync(uploadPath, { recursive: true });
}

测试验证 #

1. 重启后端服务
2. 使用Postman或前端表单重新上传产品，此时multer会正确将图片写入同级的uploads目录，产品数据也会同步保存到MongoDB

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