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

时间:2018-08-08 23:56:10

标签: javascript node.js express base64 pug

首先-这是我在这里的第一篇文章,因此我对这个问题的开头非常感谢,感谢我在建立第一个实际网站的过程中获得的许多月匿名帮助。也就是说,如果这个问题的格式(以及我的代码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 / 4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNc

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

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

1 个答案:

答案 0 :(得分:0)

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