MongoDB 使用Mongoose、Express和AngularJS上传图片

在本文中，我们将介绍如何使用Mongoose、Express和AngularJS来上传图片至MongoDB数据库。

准备工作

在开始之前，确保你已经安装了以下组件：
– Node.js 和 npm
– MongoDB
– Mongoose
– Express和AngularJS

如果你还没有安装这些组件，可以通过它们的官方网站获取安装说明。

创建项目

首先，我们需要创建一个新的Express项目并安装所需的依赖。打开终端，执行以下命令：

$ express image-upload
$ cd image-upload
$ npm install

接下来，我们需要在项目目录中创建一个新的文件夹用于存储上传的图片。在终端中执行以下命令：

$ mkdir public/uploads

后端配置

让我们通过编辑routes/index.js文件来配置后端路由。首先，我们需要导入Mongoose和Multer模块。Multer模块是一个Node.js中间件，用于处理multipart/form-data类型的请求，即用于上传文件。

在index.js文件的头部添加以下代码：

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

接下来，我们需要配置Multer来处理文件的上传。在index.js文件中，添加以下代码：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
});

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

在上述代码中，我们指定了文件的存储目录为public/uploads/，并使用文件的原始名称作为文件名。

然后，我们需要通过Mongoose创建一个数据库模型来存储上传的图片的信息。在index.js文件中，添加以下代码：

const imageSchema = new mongoose.Schema({
  name: String,
  path: String
});

const Image = mongoose.model('Image', imageSchema);

现在我们已经完成了后端的配置。

前端配置

让我们通过编辑public/javascripts/app.js文件来配置前端。首先，我们需要在app.js文件中添加一个控制器来处理图片的上传。在app.js文件的头部添加以下代码：

app.controller('ImageUploadController', function ( $scope,$ http) {
   $scope.uploadImage = function () { var formData = new FormData(); formData.append('image',$ scope.imageFile);

    $http.post('/upload', formData, {
      headers: {
        'Content-Type': undefined
      },
      transformRequest: angular.identity
    }).then(function (response) {
      // 上传成功
    }, function (error) {
      // 上传失败
    });
  };
});

上述代码中，我们定义了一个uploadImage函数，该函数通过FormData对象将图片文件包装为multipart/form-data格式的请求，并通过$http.post方法发送POST请求到/upload路由。

然后，我们需要在HTML文件中添加用于上传图片的表单。在views/index.jade文件中，添加以下代码：

form(ng-submit="uploadImage()")
  input(type="file" ng-model="imageFile")
  button(type="submit") Upload Image

现在我们已经完成了前端的配置。

上传图片

让我们来实现我们的上传功能。在index.js文件中，添加以下代码来处理上传图片的POST请求：

router.post('/upload', upload.single('image'), function (req, res) {
  const image = new Image({
    name: req.file.originalname,
    path: 'uploads/' + req.file.filename
  });

  image.save(function (error, savedImage) {
    if (error) {
      res.status(500).send(error);
    } else {
      res.send(savedImage);
    }
  });
});

上述代码中，我们首先创建了一个新的Image对象，并设置其名称和路径。然后，我们使用image.save方法将图片信息保存至MongoDB数据库。

现在，你可以运行你的应用程序，并尝试上传一张图片。上传成功后，你将在MongoDB数据库中看到一条新的图片记录。

显示图片

让我们来实现一个显示图片的功能。在index.js文件中，添加以下代码来处理获取图片信息的GET请求：

router.get('/images', function (req, res) {
  Image.find({}, function (error, images) {
    if (error) {
      res.status(500).send(error);
    } else {
      res.send(images);
    }
  });
});

上述代码中，我们使用Image.find方法从MongoDB数据库中获取所有的图片信息，并通过GET请求发送给前端。

接下来，在index.jade文件中添加以下代码来显示图片：

div(ng-repeat="image in images")
  img(src="{{image.path}}" alt="{{image.name}}")

然后，我们需要在控制器中添加以下代码来获取图片信息：

$http.get('/images').then(function (response) {
  $scope.images = response.data;
}, function (error) {
  // 获取图片信息失败
});

现在你可以重新运行你的应用程序，并在前端页面上看到已上传的图片。

总结

在本文中，我们介绍了如何使用Mongoose、Express和AngularJS来上传图片至MongoDB数据库。我们首先在后端配置了Multer来处理文件的上传，并使用Mongoose创建了数据库模型来存储图片的信息。然后，在前端配置了一个控制器来处理图片的上传，并通过HTML表单和$http服务实现了上传和显示图片的功能。

希望本文对你理解如何上传图片至MongoDB数据库有所帮助。祝你使用MongoDB、Mongoose、Express和AngularJS开发愉快！