在节点后面触发getSignedUrl函数，传递到前面

Question

TL;DR — 如何从 React 前端在我的节点后端触发 getSignedUrl 函数，并将结果返回到前端？

NTL;RM — 在我的后端 server.js 文件中，以下函数从 gcloud 生成一个签名的 url，但我不确定如何 1）从前端触发该函数，以及 2）将生成的 signedUrl 返回到我将使用它直接从浏览器上传到 gcloud 的前端。

后端：

import express from 'express';
...
app.get('/api/gcloud', () => generateV4UploadSignedUrl().catch(console.error)); // I think this is wrong because the 

async function generateV4UploadSignedUrl() {
  const bucketName = 'my-gloud-bucket';
  const filename = uuidv4();
  const options = {
    version: 'v4',
    action: 'write',
    expires: Date.now() + 15 * 60 * 1000, // 15 minutes
    contentType: 'application/octet-stream',
  };

  // Get a v4 signed URL for uploading file
  const [signedUrl] = await storage
    .bucket(bucketName)
    .file(filename)
    .getSignedUrl(options);
  console.log(signedUrl); // log out fine.
  return signedUrl;
}

前端：

  async function getUploadURL() {
    try {
      const { data } = await fetch('http://localhost:8080/api/gcloud');
      console.log(data.url); // data undefined
      return data.url;
    } catch (error) {
      console.log('error', error);
    }
  }

Answer 1

您的端点目前没有返回任何响应。您可以在 JSON 响应中发送 URL。

app.get('/upload-url', async (req, res) => {
  try {
    const url = await generateV4UploadSignedUrl()
    res.json({ url })
  } catch (err) {
    res.status(500).send({ message: err.message })
  }
}

您现在可以从前端（使用您喜欢的库）发送请求以获取 URL。

一个使用axios的例子：

async function getUploadURL() {
  try {
    const { data } = await axios.get('https://yourdomain.com/upload-url')
    return data.url
  } catch (error) {
    // handle error
  }
}

或者，如果您使用的是fetch：

async function getUploadURL() {
  try {
    const response = await fetch('https://yourdomain.com/upload-url')
    const data = await response.json()
    return data.url
  } catch (error) {
    // handle error
  }
}