2017-04-26 11 views
1

multer、node.js、mongodbを使って画像をアップロードしました。角度で画像を表示する方法(サーバー側のアップロードフォルダにアップロードされた画像と角度ジェネレータは別のサーバーで動作しています)

イメージをアップロードフォルダにアップロードしました。私はMongoDBにパスを保存しました。

これは私がこの

のような応答を得たサーバーは、私が文書

// 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) 
}); 
}); 

をretrivingています文書IDに基づいて

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

を実行している

enter image description here

私のフォルダ構造であります0

{"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"[email protected]","originalname":"login.jpg","__v":0} 

私はangleとandriodアプリケーションに対して上記の応答を送信しています。

今、この画像を角度で表示したいと思います。

角度サーバは切り抜いたサーバー・ノード・サーバーで動作しているが、別のサーバーに

を働いている私は、ファイルbcozエラー

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

がサーバーに配置されて取得しています。この

</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> 

のように置きます側面

答えて

2

を使用することができますモンゴDBから画像のパスを取得し、画像のバイト配列を返すためのget APIメソッドを変換します。

// 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) 
      }); 
}); 

このバイト配列をタグにバインドします。

<img ng-src="{{'data:image/png;charset=utf-8;base64,' + response.data.path}}"> 
+0

イメージは表示されましたが、表示されませんでしたgenemオブジェクトのpathプロパティにイメージbase64文字列を割り当てるだけで、 "asdf"と "email": "[email protected]" –

+0

"name"を取得します。私は私の答えを更新しました。それがあなたの問題を解決するならば、答えを受け入れます。 – Kalyan

+0

@itsme:私の更新された回答を確認します。 – Kalyan

0

ng-src

は、これがイメージタグに応答JSON

$scope.response = {"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"[email protected]","originalname":"login.jpg","__v":0} 

であると仮定する。

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

http://stackoverflow.com/questions/43603303/how-to-send-json-data-with-file-in-same-response-using-express-node-mongodb –

0

あなたはノードJSサーバーで<img ng-src="{{response.path}}"/>

0

画像がURL「http://localhost:3000/uploads/login.jpg」で利用可能かどうか確認してください。

そうでない場合、画像パスが正しくありません。フォルダに正しくアップロードされているかどうかを確認してください。

+0

イメージはアップロードフォルダにありますが、http:// localhost:3000/uploads/login.jpgを実行すると画像が表示されます。私はメッセージを受け取ることができません/uploads/login.jpg –

+0

これは、このイメージにアクセスできないことを意味します。権限設定があるかどうかを確認してください。 –

+0

どうすれば確認できますか? –