Question

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

我当前的尝试是读取客户端上的文件对象，将其（数据）发送到http firebase函数，然后从那里将其保存到存储中。成功保存文件后，我尝试将下载URL用作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网址是单击文件时Firebase存储控制台中提供的网址。它被标记为“下载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存储。对我而言，最有效的方法是在上传完成后执行其他函数来获取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。

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

1 个答案: