显示图像作为来自 Express 的响应 Node.js API 到 Angularjs

Question

我试图将图像保存在服务器目录中，并将其路径保存在 mongodb 中。当客户端 (Angularjs) 请求详细信息时，Express 必须发送一组对象，其中一个对象属性将发送图像，其余对象属性是数据。首先，我从 mongodb 获取图像路径，然后从服务器目录读取图像并将其附加到其余数据并发送响应。但是图像作为缓冲区数组发送，我的 html 页面无法显示图像缓冲区数组。

这是代码

快递编码

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>

我通过 Express API 调用得到的响应如下

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

其中data是海量数据的数组，我没有贴完整。如何使用 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});
                }
            });
        });

    });

Answer 1

由于您将图像保存在光盘上，因此您使用 express 和 angular，我建议使用 express.static 来提供图像并使用 ng-src以正确的方式加载它们。
这是以最少的服务器负载实施和服务的最快方式。

显示图像作为来自 Express 的响应 Node.js API 到 Angularjs

Display image as response from Express with Node.js API to Angularjs

mongodb

node.js

express

angularjs

mean-stack