Bild als Antwort von Express mit Node.js API zu Angularjs

Question

anzeigen Ich habe versucht, das Bild im Serververzeichnis zu speichern und speicherte es in mongodb. Wenn der Client (Angularjs) Details anfordert, muss Express ein Array von Objekten senden, in denen eine Objekteigenschaft das Bild sendet und der Rest der Objekteigenschaften Daten sind. Zuerst habe ich den Image-Pfad von mongodb und lese das Bild aus dem Server-Verzeichnis und fügte es an den Rest der Daten an und sendete die Antwort. Aber das Bild wird als Puffer-Array gesendet und meine HTML-Seite kann das Bild-Puffer-Array nicht anzeigen.

Hier Code

Express Code

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

-Client-Code

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

Antwort, die ich durch Express-API-Aufruf ist wie unten

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

Wo Daten Array o f riesige Daten, ich habe es nicht vollständig eingefügt. So senden Sie die Bilder von Express mit der Node.js-API an den Client.

Unten ist der Code, der die Bilder im Serververzeichnis speichert und den Pfad in mongodb speichert.

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

    }); 

Answer 1

Da Sie die Bilder auf der Disc sind zu speichern, verwenden Sie express und angular, empfehle ich express.static die Bilder zu dienen und nutzen ng-src ihnen den richtigen Weg zu laden.
Es ist der schnellste Weg, um mit der geringsten Serverlast zu implementieren und zu bedienen.