顯示圖像作爲從Express與Node.js API到Angularjs的響應

我試圖將圖像保存在服務器目錄中，並將其路徑保存在mongodb中。當客戶端（Angularjs）請求詳細信息時，Express必須發送一個對象數組，其中一個對象屬性將發送圖像，其餘對象屬性爲數據。首先我從mongodb獲得圖像路徑，並從服務器目錄中讀取圖像並將其添加到其餘數據併發送響應。但圖像作爲緩衝區數組發送，我的html頁面無法顯示圖像緩衝區數組。顯示圖像作爲從Express與Node.js API到Angularjs的響應

這裏的代碼

快遞碼

var fs = require('fs'); 
//To view the cars 
app.route('/cars/view') 
    .get(function(req,res){ 

     rentalcars.find().toArray(function(err,docs){ 
      if(err){ 
       res.send([{found:false}]); 
      }else{ 
       var data = []; 
       data.push({found:true}); 
       for(var i=0;i<docs.length;i++){ 
        docs[i].imagePath = fs.readFileSync('./assets/images/'+docs[i].imagePath); 
        data.push(docs[i]); 
       } 

       res.send(data); 
      } 
     }); 
});

客戶端代碼

<table> 
    <tbody ng-repeat="car in home.cars"> 
    <tr> 
     <img ng-src="data:image/JPEG;base64,{{car.imagePath.data}}"> 
     <td>{{car.carName}}<br/>Segment : {{car.segment}}<br/>Rent : ${{car.rentCost}} /day</td> 
    </tr> 
    </tbody> 

</table>

迴應，我通過快遞API調用得到的是如下

[ 
    { 
    "found": true 
    }, 
    { 
    "_id": "58564aacbd224fdd2b7ad527", 
    "carName": "sai", 
    "segment": "suv", 
    "rentCost": "1000", 
    "imagePath": { 
     "type": "Buffer", 
     "data": [ 
     255, 
     216, 
     255,........] 
    } 
    } 
]

，其中數據陣列Ø f巨大的數據，我沒有完全粘貼。如何將帶有Node.js API的Express圖像發送到客戶端。

下面是將圖像保存到服務器目錄並將其路徑保存爲mongodb的代碼。

var filepath =''; 
    var storage = multer.diskStorage({ //multers disk storage settings 
      destination: function (req, file, cb) { 
       cb(null, './assets/images/'); 
      }, 
      filename: function (req, file, cb) { 
       var datetimestamp = Date.now(); 
       filepath = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]; 
       cb(null, filepath); 

      } 
     }); 

    var upload = multer({ //multer settings 
         storage: storage 
        }).single('file'); 

    //To add new cars 
    app.route('/cars/add') 
     .post(function(req,res){ 
     //upload images to server/assets/images/ 
     upload(req,res,function(err){ 
      if(err){ 
       res.json({error_code:1,err_desc:err}); 
      } 
      var doc = { 
       carName : req.body.carname, 
       segment : req.body.segment, 
       rentCost : req.body.rentcost, 
       imagePath : filepath 
      } 

      rentalcars.insert(doc,function(err,result){ 
       if(err){ 
        res.json({error_code:1,err_desc:err}); 
       }else{ 
        res.json({error_code:0,err_desc:null}); 
       } 
      }); 
     }); 

    });

來源

2016-12-19 sai chandesh

2件事情：1.您是否將整個圖像保存在數據庫中？ 2.如果你使用貓鼬，你能告訴我模型嗎？ – CreasolDev

1.不，我只保存數據庫中的圖像路徑，圖像保存在服務器端目錄，藉助'multer'。 2.我不使用貓鼬，我使用的是mongodb本地驅動程序。而且我還編輯了我的問題，我粘貼了代碼，顯示了我如何將圖像保存在服務器上，並且它是mongodb中的路徑 –

由於您使用的是express並且您將文件位置保存在數據庫中，因此我建議將路由設置爲靜態，並在Angularjs中使用'ng-src'並像那樣修復它（以最小的服務器負載實現並提供服務）或2：將內存加載到內存中並對其進行base64編碼（我不推薦這個選項） – CreasolDev

既然你節省光盤上的圖像，你使用express和angular，我建議使用express.static報效圖像，並使用ng-src加載它們的正確途徑。
這是以最少的服務器負載實現和提供服務的最快方式。

來源

2016-12-20 02:09:32 CreasolDev

顯示圖像作爲從Express與Node.js API到Angularjs的響應

回答

相關問題