Nodejs 将 blob(base64) 作为图像提供

Question

Nodejs 将 blob(base64) 作为图像提供

我知道还有另外两个类似的问题，但我的问题不起作用，我不确定为什么。

我正在尝试在 Nodejs 服务器上提供以 Base64 保存的 Blob 图像。

它只是不服务，我不知道为什么。如果我注释掉“writeHead”部分，它会像它应该的那样显示base64。我已经尝试过有data:image/jpeg和没有。我也尝试过将其转换为缓冲区。只是似乎无法弄清楚。

Base64图像小于200 kb，保存在mediumblob中

谁能看到我做错了什么

app.get("/f/:id", async function(req, res) {
  r = await Files.get(req);
  if(r.err.code){
    console.log("error",r);
  }
  var file = r.res.file;

  res.writeHead(200, {
    'Content-Type': 'image/png',
    'Content-Length': file.length
  });
  res.end(file);
});

Run Code Online (Sandbox Code Playgroud)

这是它在浏览器中的样子这是没有启用 writeHead 的情况

注意：底部的“viewPortSize”id 元素是一个扩展。

编辑#1：同样在 Firefox 上，它显示“由于错误，图像无法显示”这一定意味着我已将其错误地编码为 Base64，对吧？

编辑＃3：实际上它保存正确，因为如果我删除标题并将其显示为带有 img 和 src 的 html，它会正确显示图像..现在我真的不知道问题是什么。

编辑 #2：这是 app.js 设置

// ==============================================
// Base setup
// ==============================================

process.env.TZ = "Etc/GMT"

const express     = require('express');
const session     = require('express-session');
const app         = express();
const port        = 3075;
const bodyParser  = require('body-parser');

app.use(bodyParser.urlencoded({limit: '50mb', extended: true }));
app.use(bodyParser.json({limit: '50mb'}));

app.use(require('express-useragent').express());
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}))

// Cors
app.use(async function(req, res, next) {

  let allowOrigins = [
    // removed for SO
  ];

  if(Config.Env === Environments.Local){
    res.header("Access-Control-Allow-Origin", "*");
    req.session.language = req.query.lg;
  }else{
    res.header("Access-Control-Allow-Origin", Config.FrontEnd.Url);
    var origin = req.get('origin');
    for (let i = 0; i < allowOrigins.length; i++) {
      const allowOrigin = allowOrigins[i];
      if(origin.match(allowOrigin)){
        res.header("Access-Control-Allow-Origin", origin);
      }
    }

    var subdomain = origin.split('.')[0];
    for (let j = 0; j < availableLanguages.length; j++) {
      const lang = availableLanguages[j];
      if(lang.code === subdomain){
        req.session.language = lang.code;
        break;
      }    
    }
  }

  // if(Config.Env !== Environments.Local){
    if(req.session.language !== undefined && req.session.language !== "en"){
      Config.FrontEnd.Url = Config.FrontEnd.Url.replace("://", "://"+req.session.language+".");
    }
  // }


  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, auth-id, auth-token, x-csrf-token, _csrf");
  res.header('Access-Control-Allow-Methods', 'PATCH, POST, GET, DELETE, OPTIONS');
  next();
});

Run Code Online (Sandbox Code Playgroud)

编辑＃4：如果我像这样发送它（上面有数据部分），图像就会像它应该的那样显示。但是标题不是图像。（如果我更改为图像，它会返回黑屏）

app.get("/f/:id", async function(req, res) {
  r = await Files.get(req);
  if(r.err.code){
    console.log("error",r);
  }
  var file = r.res.file;

  res.end(
    '<html>'+
      '<head></head>'+
      '<body>'+
          '<img src="'+file+'">'+
      '</body>'+
    '</html>'
  );
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mat*_*att 8

如果数据库存储data:image/png;base64,xxxx字符串，则需要将其转换回二进制数据，作为内容类型image/png（如常规图像文件）的响应的一部分。

const img_base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

const server = require('http').createServer((req,res)=>{
  console.log('got req', req.url)

  // Extract image data
  const m = /^data:(.+?);base64,(.+)$/.exec(img_base64)
  if (!m) throw new Error(`Not a base64 image [${img_base64}]`)
  const [ _, content_type, file_base64 ] = m
  const file = Buffer.from(file_base64,'base64')

  res.writeHead(200, {
    'Content-Type': content_type,
    'Content-Length': file.length
  });
  res.end(file);
})

server.listen(3132, ()=> console.log('hi', server.address()))

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年前
查看次数：	4612 次
最近记录：	4 年，12 月前