Google Cloud Storage 获取点击图片的元数据信息

Question

我有一个 Node.js 后端 React 前端应用程序。在我的 React 应用程序中，我列出了从 Google Cloud Storage 获取的几张图像，当单击图像时，将打开一个弹出页面，在弹出页面中，我想以更大的比例显示单击的图像、元数据信息和位置信息（取自ip）。

我可以获得任何图像（一张图像）的元数据信息。获取一张图片元数据信息的代码：

const express = require("express");
const cors = require("cors");
// Imports the Google Cloud client library
const { Storage } = require("@google-cloud/storage");

const bucketName = "myBucket";
const filename = "detected/0.jpg";

const storage = new Storage();

const app = express();

app.get("/api/metadata", cors(), async (req, res, next) => {
  try {

    // Gets the metadata for the file
    const [metadata] = await storage
      .bucket(bucketName)
      .file(filename)
      .getMetadata();

    const metadatas = [
      {id: 0, name: `Date: ${metadata.updated.substring(0,10)}, Time: ${metadata.updated.substring(11,19)}`},
      {id: 1, name: metadata.contentType}
    ];

    res.json(metadatas);
  } catch (e) {
    next(e);
  }
});

const port = 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));

但是，我不知道如何获取点击图像的元数据信息。如何获取被点击元素的元数据？

Answer 1

当您在 React 前端显示这些图像时，每个图像都会有一个 filename 关联。 现在 onClick 的任何 Image 将此 fileName 发送到后端 API 以获取元数据。

在你的app.get("/api/metadata", cors(), async (req, res, next) => { 您应该从req 请求对象中提取fileName，作为参数或查询字符串，并使用fileName 而不是const filename = "detected/0.jpg";