使用 base64 将图像渲染到服务器端无法正常工作

Question

首先 - 这是我在这里的第一篇文章，因此我非常感谢在构建我的第一个真实网站的过程中获得的数月匿名帮助。这也是说，如果这个问题（和我的代码 LOL）的格式不符合标准，请原谅我。我会尽量只包括相关的内容。也就是说，我在将 base64 字符串渲染到哈巴狗模板上时遇到了一些问题。

我通过 enctype='multipart/form-data' 的表单输入将图像文件发送到 API（在本例中为 JPG）。我已经让它工作得很好。但是，我还想抓取上传的图像，并在 API 响应后将其显示在我渲染到的路由上。

articles.js：

...

router.post('/add', upload.single(), function(req, res) {
     if(req.files.upfile.data) {
     global.d = new Buffer(req.files.upfile.data, 'binary').toString('base64') // I receive the data initially as a <Buffer> object // 
              // api formatting after here//
     let article = new Article(); 
             //assign article attributes 1-5, author,etc
	article.image = d;
	article.save((err) => {
	    if(err) {
		console.log(err);
		} else {
		req.flash('success', 'Log Added')
		res.redirect('/');}
		});
   }
});

...

router.get('/:id', function(req, res){
  Article.findById(req.params.id, function(err, article){
    User.findById(article.author, function(err, user){
      res.render('article', {
        article: article,
        author: user.name,
        first: article.first,
        second: article.second,
        third: article.third,
        fourth: article.fourth,
        fifth: article.fifth,
        total: article.total,
	    image: article.image
      });
    });
  });
});

渲染到：

article.pug

extends layout

block content
  h1 #{author}'s day
  h4 from #{article.title}
  br 
  br
  ul
    li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Sadness.
      span.badge.badge-primary.badge-pill #{first}
    br
    li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Anger. 
      span.badge.badge-primary.badge-pill #{second}
    br
    li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Disgust.
      span.badge.badge-primary.badge-pill #{third}
    br
    li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Neutral.
      span.badge.badge-primary.badge-pill #{fourth}
    br
    li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Happiness.
      span.badge.badge-primary.badge-pill #{fifth}
    br
    li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Happiness.
      span.badge.badge-primary.badge-pill #{image}
  
  img(src='data:image/jpeg;base64,#{image}')

我得到了丢失的图像图标，即使我的 base64 可以在我使用的每个在线解码器上工作，即使我在测试 html 文件上将 base64 字符串硬编码到链接中为<img src = "data:image/jpeg;base64,DATA_HERE">。如果我在尝试使用#{image} 之前将p #{image} 插入到该行中，我会得到类似的东西（这对我来说似乎是有效的，但我认为我只需要一个更有经验的眼睛来看看这个）：

/9j/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAA ... DTvL/734mAqYiBciDqO8FmafV/UiJb3V9kn//Z

啊，请告诉我我的误解！我已经搜索了关于 SO 的所有帖子，但无法修复我的错误。非常感谢任何输入。再次感谢！

编辑：写 image/jpg 和 image/jpeg 给了我相同的空图像图标

Answer 1

我遇到了类似的问题，我认为这是因为二进制数据的格式不适合 Pug。在你的路线上试试这个，它对我有用：

router.get('/:id', function(req, res){
  Article.findById(req.params.id, function(err, article){
    User.findById(article.author, function(err, user){
      res.render('article', {
        article: article,
        author: user.name,
        first: article.first,
        second: article.second,
        third: article.third,
        fourth: article.fourth,
        fifth: article.fifth,
        total: article.total,
        image: article.image.toString('base64')
      });
    });
  });
});

所以把你的图片行改为：

image: article.image.toString('base64')