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

Question

TL;DR -我如何从React前端触发节点后端中的getSignedUrl函数，并将结果返回给前端?

NTL;RM -在我的后端服务器.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
}
}