如何通过React+Node.js+MongoDB实现多图上传（部署适配问题）

前端FormData处理修正 #

• 多文件上传需遍历文件列表逐个append，避免直接传递文件对象：

// 假设fileRef是多文件选择input的ref
const formData = new FormData();
// 添加普通表单字段
formData.append('name', 表单名称值);
formData.append('phone', 表单号码值);
// 遍历多图文件
const files = fileRef.current.files;
for (let i = 0; i < files.length; i++) {
  formData.append('images', files[i]); // 键名需和后端接收名一致
}

• 发送请求时不要手动设置Content-Type，浏览器会自动生成带边界的multipart/form-data头：

// Axios示例
axios.post('/api/supplier/submit', formData, {
  headers: {
    'Authorization': `Bearer ${用户token}` // 保留登录验证头
  }
})
// Fetch示例
fetch('/api/supplier/submit', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${用户token}`
  },
  body: formData
})

后端Node.js配置调整 #

• 用multer中间件处理文件上传，配置正确的存储路径到根目录images文件夹：

const multer = require('multer');
const path = require('path');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 指向服务器根目录下的images文件夹
    cb(null, path.resolve(__dirname, './images'));
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名避免覆盖
    const uniqueName = `${Date.now()}-${Math.random().toString(36).slice(2)}-${file.originalname}`;
    cb(null, uniqueName);
  }
});

const upload = multer({ 
  storage,
  // 可选：限制文件类型/大小
  fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith('image/')) cb(null, true);
    else cb(new Error('仅支持图片文件'));
  }
});

• 路由中使用upload.array('images')接收多文件，同时处理表单字段：

app.post('/api/supplier/submit', upload.array('images'), async (req, res) => {
  try {
    // req.body获取普通字段，req.files获取上传的文件数组
    const supplierData = {
      name: req.body.name,
      phone: req.body.phone,
      // 存储文件访问路径到MongoDB
      images: req.files.map(file => `/images/${file.filename}`)
    };
    // 写入MongoDB逻辑
    await SupplierModel.create(supplierData);
    res.status(200).json({ msg: '提交成功' });
  } catch (err) {
    res.status(500).json({ err: err.message });
  }
});

关键排查点 #

1. 确保前后端文件字段名完全一致（比如前端append('images')对应后端upload.array('images')）
2. 服务器images文件夹需开启写入权限（部署时执行chmod 755 images）
3. 检查登录验证逻辑，确保请求头的token被后端正确解析，未拦截合法请求

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