如何在nodejs中解碼從mongodb檢索的二進制影像資料

我正在嘗試通過nodejs和mutter向mongodb上傳和檢索影像。但我被困在某個地方，我希望我能成功地將影像作為二進制資料上傳。但不在我的 .ejs 檔案中顯示影像。

路由檔案

    const express=require('express');
    const adminRouter=express.Router();
    const Bookdata=require('../model/Bookdata')
    const multer = require('multer');
    const path = require('path');
    var fs = require('fs');
    const {
      GridFsStorage
    } = require("multer-gridfs-storage");
     
    require("dotenv")
      .config();
    
    
    // set up multer for storing uploaded files
    const storage=multer.diskStorage({
      //destination for files
      destination:function(request,file,callback){
        callback(null,'../LibraryApps/public/uploads/images');
      },
      //add back the extensions
      filename:function(request,file, callback){
      
        callback(null,file.fieldname Date.now() path.extname(file.originalname));
      }
    })
    
    //upload parameters for mutter
    const upload = multer({ 
      storage: storage,
      limits:{
        fileSize: 1000000
      },
      fileFilter:function(req,file,callback){
        checkFileType(file, callback);
      }
    });
    //Check file type
    function checkFileType(file, callback){
    
      // allowed extension
      const filetypes = /jpeg|jpg|png|gif/;
      //check extension
      const extname=filetypes.test(path.extname(file.originalname).toLowerCase());
      //check mime
      const mimetype=filetypes.test(file.mimetype);
      if(mimetype&&extname){
        return callback(null, true);
      }else{
        callback('Error: Images only');
      }
    }
    var imgModel = require('../model/Bookdata');
    
    function router(nav){
    adminRouter.get('/',function(req,res){
       
    
        imgModel.find({}, (err, items) => {
          if (err) {
              console.log(err);
              res.status(500).send('An error occurred', err);
          }
          else {
              //res.render('imagesPage', { items: items });
              res.render('addBook',{
                nav,
                title:'Library'
                
            })
          }
      });
    })
    
    adminRouter.post('/add',upload.single(`image`), function(req,res){
      // res.send("Hey I am Added");
      console.log(req.file);
      var item={
        title: req.body.title,
        author: req.body.author,
        genre: req.body.genre,
        //image: req.file.image,
        image: {
          data: fs.readFileSync(path.join('../LibraryApps/public/uploads/images/'   req.file.filename)),
          contentType: 'image/png'
      }
      }
      imgModel.create(item, (err, item) => {
        if (err) {
            console.log(err);
        }
        else {
          var book=Bookdata(item);
          book.save();
          res.redirect('/books');
        }
    });
     
    
    });
    return adminRouter;
    }
    module.exports=router;

my model file

    //Accessing Mongose package
    const mongoose=require('mongoose');
    
    //Database connection
    // mongoose.connect('mongodb://localhost:27017/library');
    mongoose.connect('mongodb....');
    //Schema definition
    const Schema= mongoose.Schema;
    
    const BookSchema=new Schema({
        title: String,
        author: String,
        genre: String,
       // image: String,
        image:{
            data: Buffer,
            contentType: String
        }
    });
    
    //Model creation
    var Bookdata= mongoose.model('bookdata',BookSchema);
    module.exports=Bookdata;

這是我的 .ejs 檔案

<%for(i=0;i<books.length;i ){%>

  <div class="row">    
        <br>
        <div class="col-md-2 col-sm-3 text-center">
          <a class="story-title" href="#">
           
            <img src="data:<%=books[i].image.contentType%>;base64,{Buffer.from('<%=books[i].image.data%>','binary').toString('base64')}"  style="width:100px;height:100px" class="img-circle">
          </a>
       
        </div>

我的獲取功能

 booksRouter.get('/',function(req,res){
            Bookdata.find()
            .then(function(books){
              res.render("books",{
                nav,
                title:"Library App",
                books
              });
            })
            
           
          });
      

在mongodb中，我變得像這樣

> _id:6226e5c60e92bdee82dc574a title:"cc" author:"aa" genre:"life" image:Object
> data:Binary('iVBORw0KGgoAAAANSUhEUgAAA gAAAOECAYAAAAylRvFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYA...',
> 0) contentType:"image/png"
> __v:0

在控制臺中我收到錯誤

GET data:image/png;base64,{Buffer.from('�PNG

���
IHDR���������2�����gAMA�����a���
sRGB������� cHRM��z&��������������u0���`��:���p��Q<���bKGD�������������	pHYs������
� ����IDATx���W�$ו�	�k�pZ��H(�*g���NWw��y�b.�b~��I�b.�3]�d�$HB%�D���ҵ�������EDF&�V
H���ws�����k�o��*����x<����x�W�?����x<����|�x���x<����x<�������x<����
x���x<����x<�������x<����
x���x<����x<�������x<����
x���x<����x<�������x<����
���0�������0�Y\5_D���x<����x<���ѱ���Pб�-S�-����E�g��Ya>^��ź���x<����|[������W�t=��L��̮jf��B�s����x<�������,�*(�Kx&�.Lb�
� ސ|A���"/eÏ�������x<���]� net::ERR_INVALID_URL

我的 MongoDB

uj5u.com熱心網友回復：

在模板中，只需添加屬性：

編輯：Buffer.from不需要，因為它已經是一個緩沖區：

使用 for 回圈：

<%for(i=0;i<books.length;i  ){%>

  <div >
        <br>
        <div >
          <a  href="#">

            <img src="data:<%=books[i].image.contentType%>;base64,<%=books[i].image.data.toString('base64')%>"  style="width:100px;height:100px" >
          </a>

        </div>
 <% } %>

標籤：节点.js mongodb 表示 猫鼬 穆尔特

上一篇：nodejsmongoDB連接登錄頁面

下一篇：Express-Validator"validationResult"回傳[objectObject]