javascript - 从 HTTP 函数将图像文件写入 Firebase Storage

Question

我正在尝试通过云功能写入图像 Firebase 存储(以获得更合适的写入访问权限)。

我当前的尝试是读取客户端上的文件对象，将其(数据)发送到 http firebase 函数，然后将其保存到存储中。成功保存文件后，我尝试使用下载网址作为 img src 值，但文件不显示。尝试查看文件时，我还在存储控制台中看到错误(加载预览时出错)。

如果我将Storage中的数据保存为base64，我可以将文件的内容复制到img src属性中，并且显示正常。但是，我想简单地使用下载 URL，就像我只是通过客户端 SDK 或直接通过控制台上传图像一样。

在客户端中，我只是使用 FileReader读取上传的文件进行发送。我尝试了所有读取它的方法(readAsText、readAsBinaryString、readAsDataURL、readAsArrayBuffer)，但没有似乎解决了这个问题。

以下是我通过 Firebase 功能上传文件的方法:

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as path from 'path';
import * as os from 'os';
import * as fs from 'fs-extra';

export default functions.https.onCall(async(req, context) => {
  const filename = req.filename;
  const bucket = admin.storage().bucket(environment.bucket)
  const temp_filename = filename;
  const temp_filepath = path.join(os.tmpdir(), temp_filename);
  await fs.outputFile(temp_filepath, req.data, {});

  // Upload.
  await bucket.upload(temp_filepath, {destination: 'logos'})
    .then((val) => {})
    .catch((err) => {});
});

这会成功上传文件，但是，当用作 img src 属性时，下载 URL 不起作用。

我注意到的一件事是，当使用客户端 SDK 发送文件(通过 AngularFireStorage)时，有效负载是原始 png 内容。例如。文件片段:

PNG


IHDRÈÈ­X®¤IDATx^í]  
Eµ¾·{&1,!dù»*yVQ@PTEDPA>ÊâC\P"ÈÄ"
F}òIW÷üCL@BÉL÷}
....

但是，以文本形式读取文件不会产生此编码。我尝试过其他几种编码。

任何帮助将不胜感激。

编辑

以下是我关于使用下载 URL 的意思:

<img alt='logo' src='https://firebasestorage.googleapis.com/v0/b/y<project-name>/o/logos%2FAnM65PlBGluoIzdgN9F5%2Fuser.png?alt=media&token=<token>' />

上面的 src url 是单击文件时 Firebase 存储控制台中提供的 URL。它被标记为“下载 URL”(我相信这是通过 sdk 调用 getDownloadUrl() 检索到的 URL)。

当使用 AngularFireStorage 将文件存储时，下载 URL 将起作用。当我说它“会起作用”时，我的意思是图像会正确显示。当使用FileReader将数据传递给http云函数进行上传时(如上所示)，图像将不会显示。换句话说，通过后端上传文件后，下载网址实际上提供了上传的内容，只是不是 img 标签可以显示的格式。

一个可能的问题可能是我在使用 FileReader readAsText 时没有获得正确的编码。这是我使用 FileReader 所做的事情:

const reader = new FileReader();

reader.onloadend = () => {
  firebase.functions().httpsCallable('http_put_logo')(reader.result);
};

// Have tried various encodings here, as well as all reader methods.
reader.readAsText(file); 

编辑2

到目前为止，关于这个问题的所有讨论似乎都是围绕正确获取下载 URL 展开的。我不确定 Firebase 文档是否有此信息，但下载 URL 可在存储控制台中找到。目前我只是复制并粘贴该 URL 以进行测试。

我这样做的原因是因为我计划将这些图像 URL 保存在数据库中，因为它们将被频繁使用和公开可读。因此，我不会使用 getDownLoadURL() 方法来获取这些图像，我只是直接在 img 标记中链接到它们。

这是我的控制台的图像，可以看出我的意思(右下):

您只需单击它并复制它即可。然后，您可以在浏览器选项卡中打开它、下载它、将其用作 src 值等。

编辑3

下面是使用客户端 sdk 时请求负载的样子:

这是我将文件作为文本读取并发送到后端进行上传时的情况:

请注意，有效负载存在差异。这就是为什么我不确定我是否正确读取了文件或错误地编码了文件。

Answer 1

您的代码的哪一部分负责获取 URL？我最近使用了类似的方法，使用云函数将图像上传到 Firebase Storage。对我来说最有效的是在上传完成后执行不同的函数来获取 URL。像这样的事情:

const bucket = admin.storage().bucket(environment.bucket)
  const temp_filename = filename;
  const temp_filepath = path.join(os.tmpdir(), temp_filename);
  await fs.outputFile(temp_filepath, req.data, {});

  // Upload.
  await bucket.upload(temp_filepath, {destination: 'images'})
    .then((val) => {retrieveUrl(temp_filename)})
    .catch((err) => {});

retrieveUrl = (imageName) => {
    const storage = firebase.storage();
    storage.ref(`/images/${imageName}.jpg`).getDownloadURL()
      .then( url => {
        /*Save the url to a variable or attach it directly to the src of your image, depending on the structure of your project*/
      })
      .catch(err => console.log(err));
  }

请记住，您需要在项目中安装 firebase 才能调用 firebase.storage。