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,........]
     }
   }
]

如果数据是大量数据，我没有完全粘贴它。如何将带有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的响应

1 个答案: