使用MongoDB儲存圖片,並在node.js(Express)和AngularJS上顯示
将图像进行BASE64编码并保存到MongoDB中,然后可以直接提取出来并设置到标签中,这是一种懒人的方法。
但是,由于BASE64编码会使文件比二进制大,所以如果想要节省MongoDB的容量,最好不要使用这种方法。
将图像保存在文件系统中,并将路径等信息保存在MongoDB中是最佳选择吗?
流动
-
- 客户端上传图像(经过BASE64编码的字符串)(例如从Android发送)
-
- 使用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编码后,没有对其进行任何转换或处理。