在没有公共 URL 的 Node.js 中从 Google Cloud Storage 检索图像

Question

我正在尝试将图像返回给我的用户以在 DOM 上查看，而不创建图像的公共链接（在取回图像之前，此路由受我的服务器的身份验证保护）。这是我迄今为止尝试过的，但这可能是错误的方法。

我正在按照 Google Cloud Storage with Node.js 指南向我的项目添加图片上传。我现在可以上传，并且图像正在保存在 Google Cloud Storage 中。该指南展示了如何检索公共 URL：

https://cloud.google.com/nodejs/getting-started/using-cloud-storage

我正在尝试使用文件流而不是公共 URL，这样我的图像就不会被公开。我猜它看起来类似于这个存储库中的流： https://github.com/GoogleCloudPlatform/google-cloud-node

但我试图在 HTTP 响应中返回图像，而不是简单地将它们本地存储在我的文件系统中。

我的客户端 Javascript 得到的响应看起来像一个巨大的 blob。 ����JFIF���Photoshop 3.08BIM� 元数据让我觉得这实际上是正确的图像，但我不知道如何让它看起来像图像。

这是我的节点服务器文件。上传到谷歌云存储，/post，正在工作，我可以看到正在添加的图像。

/get 正在返回看起来像一个巨大的 blob 的东西，看起来就像是我想要的图像（就像一个我不知道如何转换的奇怪 blob）。

我的代码如下所示：

var express = require('express');
var router = express.Router();
const Multer = require('multer');
const multer = Multer({
  storage: Multer.memoryStorage(),
  limits: {
    fileSize: 5 * 1024 * 1024 // no larger than 5mb, you can change as needed.
  }
});

const Storage = require('@google-cloud/storage');

const storage = Storage({
  keyFilename: 'server/firebase-service-account.json',
  projectId: process.env.FIREBASE_PROJECT_ID
});

const bucket = storage.bucket(process.env.FIREBASE_STORAGE_BUCKET);

// Process the file upload and upload to Google Cloud Storage.
router.post('/', multer.single('file'), (req, res, next) => {
  console.log('req.body', req.body);
  console.log('req.file', req.file);
  if (!req.file) {
    res.status(400).send('No file uploaded.');
    return;
  }

  // Create a new blob in the bucket and upload the file data.
  const blob = bucket.file(req.file.originalname);
  const blobStream = blob.createWriteStream();

  blobStream.on('error', (err) => {
    next(err);
    return;
  });

  blobStream.on('finish', () => {
    res.status(200).send('The image has been successfully uploaded to google cloud storage');
  });

  blobStream.end(req.file.buffer);
});

router.get('/', function (req, res, next) {
  var stream = bucket.file('Toast.jpg').createReadStream();

  stream.pipe(res);

  stream.on('data', function (data) {
    res.write(data);
  });

  stream.on('error', function (err) {
    console.log('error reading stream', err);
  });

  stream.on('end', function () {
    res.set({
      "Content-Disposition": 'attachment; filename="Toast.jpg"',
      "Content-Type": 'image/jpg'
    });
    res.end();
  });
});

module.exports = router;

这很接近吗？有没有更好的方法来使用我的身份验证来保护我的图像？

Answer 1

我想错了。我只需将我的<img src="" 路由到正确的位置。

HTML

<img src="/uploads/1234">

服务器节点

var express = require('express');
var router = express.Router();
const Multer = require('multer');
const multer = Multer({
  storage: Multer.memoryStorage(),
  limits: {
    fileSize: 5 * 1024 * 1024 // no larger than 5mb, you can change as needed.
  }
});

const Storage = require('@google-cloud/storage');

const storage = Storage({
  keyFilename: 'server/firebase-service-account.json',
  projectId: process.env.FIREBASE_PROJECT_ID
});

const bucket = storage.bucket(process.env.FIREBASE_STORAGE_BUCKET);

// Process the file upload and upload to Google Cloud Storage.
router.post('/', multer.single('file'), (req, res, next) => {
  console.log('req.body', req.body);
  console.log('req.file', req.file);
  if (!req.file) {
    res.status(400).send('No file uploaded.');
    return;
  }

  // Create a new blob in the bucket and upload the file data.
  const blob = bucket.file(req.file.originalname);
  const blobStream = blob.createWriteStream();

  blobStream.on('error', (err) => {
    next(err);
    return;
  });

  blobStream.on('finish', () => {
    res.status(200).send('The image has been successfully uploaded to google cloud storage');
  });

  blobStream.end(req.file.buffer);
});

router.get('/:imageId', function (req, res, next) {
  var stream = bucket.file('Toast.jpg').createReadStream();

  res.writeHead(200, {'Content-Type': 'image/jpg' });

  stream.on('data', function (data) {
    res.write(data);
  });

  stream.on('error', function (err) {
    console.log('error reading stream', err);
  });

  stream.on('end', function () {
    res.end();
  });
});

module.exports = router;

我仍然希望得到有关这是否是解决此问题的正确方法的反馈。 （显然，硬编码将需要去。）

Answer 2

现在可以使用“下载”功能完成获取图像部分，这是我在 Typescript 中的 sn-p：

  async downloadImage(filename: string): Promise<Buffer> {
    try {
       // this.storageHandler is the Storage variable created with new Storage();
      const file = this.storageHandler.bucket(this.bucketName).file(filename);
      const imageDownloaded = await file.download();
      return imageDownloaded[0];
    } catch (err) {
      console.log('Handle the error as you want');
    }
    throw Error('Error while downloading image');
  }
}