如何以角度显示图像(在服务器端上传文件夹中上传的图像和angularjs在不同的服务器上工作)?

时间:2017-04-26 10:32:41

标签: javascript angularjs node.js mongodb multer

我使用multer,node.js,mongodb上传了图片。

我将图片上传到上传文件夹,然后将路径存储在MongoDB中。

这是我的文件夹结构

enter image description here

服务器正在运行

http://localhost:3000/images/590051dcc90cf702e452b9c1

基于文档ID我正在检索文档

// To get the single image/File using id from the MongoDB
app.get('/images/:id', function(req, res) {

//calling the function from index.js class using routes object..
routes.getImageById(req.params.id, function(err, genres) {
if (err) {
throw err;
}
//res.download(genres.path);
res.send(genres)
});
});

我得到了这样的回复

{"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"asdf@gmail.com","originalname":"login.jpg","__v":0}

我发送上述响应于角度和andriod应用程序。

现在我想以角度显示此图像。

角度服务器正在不同的服务器节点服务器工作在不同的服务器

我这样说

</head><body>
<body ng-controller="RegisterCtrl" ng-app="myApp">
 <div ng-init="signin()">
 <img ng-src="{{response.path}}"/>
   {{response}}
    </div>
</body>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
<script>var myApp = angular.module('myApp', []);
myApp.controller('RegisterCtrl', function ($scope,$http) {

$scope.signin = function()

{

$http.get('http://localhost:3000/images/590051dcc90cf702e452b9c1').success(function(data, response)
{
$scope.response  = data;
console.log(data);
}); 

}
});
</script>
</body></html>

我收到错误

file:///C:/Users/mohan/Desktop/uploads/login.jpg net::ERR_FILE_NOT_FOUND

bcoz文件位于服务器端

4 个答案:

答案 0 :(得分:2)

在Node JS服务器上转换get api方法从Mongo Db获取图像路径并返回图像的字节数组。

input3 == (data)&((1 << 4)-1)

将此字节数组绑定到您的标记。

// To get the single image/File using id from the MongoDB
app.get('/images/:id', function(req, res) {

        //calling the function from index.js class using routes object..
        routes.getImageById(req.params.id, function(err, genres) {
             if (err) {
                 throw err;
             }
             //res.download(genres.path);
             var fs = require('fs');
             // read binary data
             var bitmap = fs.readFileSync(genres.path);
             // convert binary data to base64 encoded string
             //res.send(new Buffer(bitmap).toString('base64'));
             genres.path = new Buffer(bitmap).toString('base64');

             res.send(genres)
           });
});

答案 1 :(得分:0)

只需使用ng-src

指定图像路径即可

假设这是响应json

$scope.response = {"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"asdf@gmail.com","originalname":"login.jpg","__v":0}
图片标签中的

<img ng-src"{{response.path}}">

答案 2 :(得分:0)

您可以使用SELECT time_dimension.db_date AS date, by_date.sale_count FROM time_dimension LEFT JOIN (SELECT DATE(sales.created_at) sale_date, COUNT(1) AS sale_count FROM sales WHERE created_at BETWEEN '2017-03-11 00:00:00' AND '2017-04-11 23:59:59' GROUP BY DATE(sales.created_at)) by_date ON time_dimension.db_date = by_date.sale_date WHERE time_dimension.db_date BETWEEN '2017-03-11' AND '2017-04-11'

答案 3 :(得分:0)

请问您是否可以在网址中确认图片是否可用,&#39; http://localhost:3000/uploads/login.jpg&#39;?

如果不是,则图像路径不正确。请检查是否正确上传到文件夹中。