使用Multer和MongoDB开发图片上传服务时本地服务器持续加载无响应求助

• 第一步：确认本地MongoDB服务已启动
  你配置的数据库地址是mongodb://localhost/mongo，需要先确保本地MongoDB服务处于运行状态：

  • Windows：打开服务管理器，找到MongoDB服务，确认状态为「正在运行」
  • Mac/Linux：终端执行ps aux | grep mongod，确认有对应的运行进程
    另外建议给Mongoose添加连接错误监听，方便定位数据库连接问题，在App.js的mongoose.connect代码后添加：

  mongoose.connection.on('error', err => {
    console.log('MongoDB连接失败：', err)
  })
  

  启动服务后查看控制台，如果有连接报错，就可以对应修复数据库配置问题。

• 第二步：确认项目根目录存在uploads文件夹
  Multer配置的文件存储目录是uploads，如果项目根目录下没有手动创建这个文件夹，上传文件时会触发错误，导致请求无响应。你可以在项目根目录手动新建名为uploads的空文件夹，或者修改Multer的storage配置，自动创建目录：

  var storage = multer.diskStorage({
    destination: (req, file, cb) => {
      const uploadDir = 'uploads'
      // 目录不存在则自动创建
      if (!fs.existsSync(uploadDir)) {
        fs.mkdirSync(uploadDir)
      }
      cb(null, uploadDir)
    },
    filename: (req, file, cb) => {
      cb(null, file.fieldname + '-' + Date.now())
    }
  });
  

• 第三步：补全请求的错误返回逻辑
  你当前的代码中，很多错误分支只打印了日志，没有给客户端返回响应，就会导致页面一直处于加载状态：

  1. 图片保存失败的分支添加返回：

  imgModel.create(obj, (err, item) => {
    if (err) {
      console.log(err);
      // 新增错误返回
      return res.status(500).send('图片保存失败')
    }
    else {
      res.redirect('/');
    }
  });
  

  2. 确保上传非png格式图片时不会出错：你当前硬编码了contentType: 'image/png'，如果上传jpg、webp等其他格式图片会导致前端渲染失败，建议改成动态获取文件类型：

  img: {
    data: fs.readFileSync(path.join(__dirname + '/uploads/' + req.file.filename)),
    contentType: req.file.mimetype
  }
  

• 第四步：确认访问的端口正确
  你.env中配置的端口是5500，启动服务后需要访问http://localhost:5500，而不是默认的3000端口。

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