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

Question

首先-这是我在这里的第一篇文章，因此，对于我在构建第一个实际网站的过程中获得的许多个月的匿名帮助，我深表感谢。也就是说，如果这个问题的格式（以及我的代码LOL）不符合标准，请原谅我。我将尝试仅包括相关内容。就是说，将base64字符串渲染到pug模板时遇到一些问题。

我正在通过带有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可以在我使用的每个在线解码器上运行，即使我将base64字符串硬编码为测试html文件中的<img src = "data:image/jpeg;base64,DATA_HERE">，我也都会看到丢失的图像图标。而且，如果我在尝试使用p #{image}之前将#{image}插入行中，则会得到类似的信息（这对我来说似乎是有效的，但我认为我只需要更有经验的眼睛来看看）：] >

/ 9j / 4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAA ... DTvL / 734mAqiiBciDqO8FmafV>

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

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

首先-这是我在这里的第一篇文章，因此，对于我在构建第一个实际网站的过程中获得的许多个月的匿名帮助，我深表感谢。那是...

我有一个类似的问题，我认为这是因为二进制数据的格式不适合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')

Answer 1

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