使用MongoDB儲存圖片,並在node.js(Express)和AngularJS上顯示

将图像进行BASE64编码并保存到MongoDB中,然后可以直接提取出来并设置到标签中,这是一种懒人的方法。
但是,由于BASE64编码会使文件比二进制大,所以如果想要节省MongoDB的容量,最好不要使用这种方法。

将图像保存在文件系统中,并将路径等信息保存在MongoDB中是最佳选择吗?

流动

    1. 客户端上传图像(经过BASE64编码的字符串)(例如从Android发送)

 

    1. 使用Express接收并存储到MongoDB(使用Mongoose)

 

    使用AngularJS从数据库中取出并在浏览器中显示。

1. 客户上传图片到系统

因为在node.js和MongoDB中很容易处理,所以将其放入JSON中发送。
例如,如果从Android发送,可以准备一个这样的方法,获取以Base64编码的字符串的位图,并将其填充到JSON中进行发送。
发送部分略过。请使用Volley或其他方法进行发送。

请注意,下面这部分是Java源代码。

private String stringifyBitmap(Bitmap bitmap) {
        ByteArrayOutputStream byteArrayBitmapStream = new ByteArrayOutputStream();
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayBitmapStream);
        return Base64.encodeToString(byteArrayBitmapStream.toByteArray(), Base64.DEFAULT);
}

POST到http://<主机名>/book。假设JSON的格式是这样的。

{
  jsondata: {
    title: 'とある本',
    coverImage: <BASE64エンコード済みの文字列>
  }
}

使用express接收并且使用Mongoose将数据保存到MongoDB中。

表达

app.post('/book', db.book.create); // POSTの処理
// Bookスキーマを定義
var BookSchema = new mongoose.Schema({
    title  : String,
    coverImage : String
});

exports.Book = db.model('Book', BookSchema);

// jsonからPOSTデータを取り出す。
var content = JSON.parse(req.body.jsondata);

// MongoDBにBookドキュメントを保存
exports.book.create = function(req, res) {
  Book.create(content, function (err, data) {
    if (err) throw new Error(err);
    res.send('{ result: "ok" }');
  });
};

3. 使用AngularJS将其提取并在浏览器中显示

表达

app.get('/book', db.book.read); // GETの処理。要認証

exports.book.read = function(req, res) {
  Book.find({ title: 'とある本' }, function(err, docs) {
    if (err) throw new Error(err);
    res.send(docs);
  });
};

AngularJS (Chinese: 角度JS) is a JavaScript-based open-source framework for building dynamic web applications.

angular.module('angularApp').controller('MainCtrl', function ($scope, $http) {
  var url = '/book';

  $scope.book = [];
  $scope.getBook = function() {
    $http.get(url).success(function(data) {
      $scope.book = data;
    });
  };

  $scope.getBook();
});

将data方案直接设置为img标签的src属性!!!

<img src="data:image/gif;base64,{{book.coverImage}}"/>

最重要的是,我们在最初将数据进行BASE64编码后,没有对其进行任何转换或处理。

广告
将在 10 秒后关闭
bannerAds