时间戳

首页 > 解决方案 > 从 HTTP 函数将图像文件写入 Firebase 存储

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

问题描述

我正在尝试通过 Cloud Function 编写图像 Firebase Storage（以获得更合适的写入访问权限）。

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

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

在客户端，我只是使用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) => {});
});

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

我注意到的一件事是，当使用客户端 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>' />

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

当使用 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 时请求有效负载的图像： 在此处输入图像描述

这是我将文件作为文本读取并发送到后端进行上传时： 在此处输入图像描述

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

标签： javascriptfirebasegoogle-cloud-functionsgoogle-cloud-storagefirebase-storage

解决方案

您的代码的哪一部分负责获取 URL？我最近使用了类似的方法来使用云功能将图像上传到 Firebase 存储。对我来说最有效的是在上传完成后执行不同的函数来获取 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。

推荐阅读