从 firebase react Js 下载图像

Question

我尝试了很多从 firebase 下载图像的方法，但下载 URL 并没有像我预期的那样工作，它在新选项卡中打开图像。

火力点功能：

export async function addMedia(location: "initial" | "prep" | "merge" | "sribe" | "other", file: string) {

    let fileName = uuidv4();
    const storageRef = ref(storage, `/${location}/${fileName}`);

    let downloadLink = "";

    await uploadString(storageRef, file, "data_url").then(async (snapshot) => {
        await getDownloadURL(snapshot.ref).then((link: any) => {
            downloadLink = link;
        })
    })

   return downloadLink;

我正在使用文件保护程序依赖项来实现下载目的，它工作正常。

文件下载功能：

const downloadImage = (url: any, name: any) => {
  console.log(url, name, "image details");
  FileSaver.saveAs(url,name);
}

从 firebase 函数获取的 fire base URL：

https://firebasestorage.googleapis.com/v0/b/scribe-it-dev-5eed1.appspot.com/o/initial%2F1988-43ce-b927?alt=media&token=cdb01f22-7d9d-4aaf-adc8-323737fd7b1d

当我按下下载时，我得到以下结果：

在新标签页中打开

Answer 1

停止结合await then ; 使用其中之一，但不能同时使用两者。

所以：

export async function addMedia(location: "initial" | "prep" | "merge" | "sribe" | "other", file: string) {
    let fileName = uuidv4();
    const storageRef = ref(storage, `/${location}/${fileName}`);

    let downloadLink = "";

    const snapshot = await uploadString(storageRef, file, "data_url");
    const link = await getDownloadURL(snapshot.ref)

    return link;
}

请记住，您也需要在调用此addMedia时使用await或then ，这意味着您不能在呈现 UI 的代码中调用它。 如果要在 UI 的组件中显示图像，请将下载 URL 存储在组件的状态中并从那里使用它，如下所示：

• getDownloadURL 需要一些时间
• 如何从 firebase 存储下载图像并将它们作为 prop 分配给 React 中的文档？
• 从 Firebase 存储加载图片到 React

Answer 2

我使用 base64Url 下载图像，它对我来说工作正常。我将 base64Url 保存在 firebase 中作为字符串