如何将 base64 图像 URL 上传到 Firebase 并检索其访问令牌？

Question

在 MERN + Firebase 项目中，我有一个要上传的图像数据字符串，然后获取该文件的访问令牌。

图像数据字符串具有以下形式：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOoAAAClCAYAAABSmmH3AAAAAXNSR0IArs4c6QAABFJJREFUeF7t1oENg0AQA8F8/6XSAx8pVWTloQIzZwvOvfd+PAQI/LXAMdS/vo9wBH4ChqoIBAIChho4kogEDFUHCAQEDDVwJBEJGKoOEAgIGGrgSCISMFQdIBAQMNTAkUQkYKg6QCAgYKiBI4lIwFB1gEBAwFADRxKRgKHqAIGAgKEGjiQiAUPVAQIBAUMNHElEAoaqAwQCAoYaOJKIBAxVBwgEBAw1cCQRCRiqDhAICBhq4EgiEjBUHSAQEDDUwJFEJGCoOkAgIGCogSOJSMBQdYBAQMBQA0cSkYCh6gCBgIChBo4kIgFD1QECAQFDDRxJRAKGqgMEAgKGGjiSiAQMVQcIBAQMNXAkEQkYqg4QCAgYauBIIhIwVB0gEBAw1MCRRCRgqDpAICBgqIEjiUjAUHWAQEDAUANHEpGAoeoAgYCAoQaOJCIBQ9UBAgEBQw0cSUQChqoDBAIChho4kogEDFUHCAQEDDVwJBEJGKoOEAgIGGrgSCISMFQdIBAQMNTAkUQkYKg6QCAgYKiBI4lIwFB1gEBAwFADRxKRgKHqAIGAgKEGjiQiAUPVAQIBAUMNHElEAoaqAwQCAoYaOJKIBAxVBwgEBAw1cCQRCRiqDhAICBhq4EgiEjBUHSAQEDDUwJFEJGCoOkAgIGCogSOJSMBQdYBAQMBQA0cSkYCh6gCBgIChBo4kIgFD1QECAQFDDRxJRAKGqgMEAgKGGjiSiAQMVQcIBAQMNXAkEQkYqg4QCAgYauBIIhIwVB0gEBAw1MCRRCRgqDpAICBgqIEjiUjAUHWAQEDAUANHEpGAoeoAgYCAoQaOJCIBQ9UBAgGB8zzPDeQUkcC0wHnf11CnK+DlCwJ+fQtXknFewBd1vgIACgK+qIUryTgvYKjzFQBQEDDUwpVknBcw1PkKACgIGGrhSjLOCxjqfAUAFAQMtXAlGecFDHW+AgAKAoZauJKM8wKGOl8BAAUBQy1cScZ5AUOdrwCAgoChFq4k47yAoc5XAEBBwFALV5JxXsBQ5ysAoCBgqIUryTgvYKjzFQBQEDDUwpVknBcw1PkKACgIGGrhSjLOCxjqfAUAFAQMtXAlGecFDHW+AgAKAoZauJKM8wKGOl8BAAUBQy1cScZ5AUOdrwCAgoChFq4k47yAoc5XAEBBwFALV5JxXsBQ5ysAoCBgqIUryTgvYKjzFQBQEDDUwpVknBcw1PkKACgIGGrhSjLOCxjqfAUAFAQMtXAlGecFDHW+AgAKAoZauJKM8wKGOl8BAAUBQy1cScZ5AUOdrwCAgoChFq4k47yAoc5XAEBBwFALV5JxXsBQ5ysAoCBgqIUryTgvYKjzFQBQEDDUwpVknBcw1PkKACgIGGrhSjLOCxjqfAUAFAQMtXAlGecFDHW+AgAKAoZauJKM8wKGOl8BAAUBQy1cScZ5AUOdrwCAgoChFq4k47yAoc5XAEBBwFALV5JxXsBQ5ysAoCDwBaT9ke70WG4vAAAAAElFTkSuQmCC

这是对文件上传位置的参考：

const imageRef: StorageReference = ref(
  storage,
  `/issueImages/${firebaseImageId}`
);

到目前为止，我已经尝试将“put”功能与 imageRef 一起使用，当我尝试使用 firebase 的 uploadBytes() 时，我必须将其上传为 Buffer，即使那样我似乎也找不到访问令牌在元数据中。

Answer 1

要将数据 URL 上传到 Firebase，您可以使用 storageRef.putString(url, 'DATA_URL')（旧版）或 uploadString(storageRef, url, 'DATA_URL')（现代），具体取决于您使用的 SDK。

当您将文件上传到 Cloud Storage 存储桶时，在客户端调用它的 getDownloadURL() 版本之前，它不会获得访问令牌。因此，要解决您的问题，您可以在上传后立即致电getDownloadURL()。

如果 Node 正在客户端机器上运行，您将使用：

// legacy syntax
import * as firebase from "firebase";

// reference to file
const imageStorageRef = firebase.storage()
  .ref(`/issueImages/${firebaseImageId}`);

// perform the upload
await imageStorageRef.putString(dataUrl, 'DATA_URL');

// get the download URL
const imageStorageDownloadURL = await imageStorageRef.getDownloadURL();

// modern syntax
import { getStorage, getDownloadURL, ref, uploadString } from "firebase/storage";

// reference to file
const imageStorageRef = ref(
  getStorage(),
  `/issueImages/${firebaseImageId}`
);

// perform the upload
await uploadString(imageStorageRef, dataUrl, 'DATA_URL');

// get the download URL
const imageStorageDownloadURL = await getDownloadURL(imageStorageRef);

---

如果 Node 在您控制的私人服务器上运行，您应该选择使用 Firebase Admin SDK，因为它绕过了适用于客户端 SDK 的速率限制和限制。

如前所述，下载 URL 不会自动创建。不幸的是，getDownloadURL 是客户端 SDK 的一项功能，而 Admin SDK 没有。所以我们可以让客户端在需要时调用getDownloadURL，或者如果我们想将它插入数据库，我们可以手动创建下载 URL。

Nico 在how Firebase Storage URLs work 上写了一篇很棒的文章，他们在那里整理了来自Firebase Extensions GitHub 和this StackOverflow thread 的信息。总之，要在上传后创建（或重新创建）下载 URL，您可以使用以下函数：

import { uuid } from "uuidv4";

// Original Credit: Nico (@nicomqh)
// https://www.sentinelstand.com/article/guide-to-firebase-storage-download-urls-tokens
// "file" is an instance of the File class from the Cloud Storage SDK
// executing this function more than once will revoke all previous tokens
function createDownloadURL(file) {
  const downloadToken = uuid();

  await file.setMetadata({
    metadata: {
      firebaseStorageDownloadTokens: downloadToken
    }
  });

  return `https://firebasestorage.googleapis.com/v0/b/${file.bucket.name}/o/${encodeURIComponent(file.name)}?alt=media&token=${downloadToken}`;
}

这允许我们将上面的客户端代码更改为以下代码，以便它可以使用 Admin SDK 运行：

// assuming firebase-admin is initialized already
import { getStorage } from "firebase-admin/storage";

// reference to file
const imageStorageFile = getStorage()
  .bucket()
  .file(`/issueImages/${firebaseImageId}`);

// perform the upload
await imageStorageFile.save(dataUrl);

// get the download URL
const imageStorageDownloadURL = await createDownloadURL(imageStorageFile);

---

在上述所有示例中，都会检索下载 URL 并将其保存到 imageStorageDownloadURL 变量中。您应该将此值按原样存储在数据库中。但是，如果您只想存储访问令牌并根据需要重新组合 URL，则可以使用以下方法从其 ?token= 参数中提取令牌：

const downloadToken = new URL(imageStorageDownloadURL).searchParams.get('token');