从firebase react Js下载映像

omtl5h9j 于 2022-12-19 发布在 React

关注(0)|答案(2)|浏览(103)

我尝试了这么多的方法从firebase下载图像，但下载网址也不像我预期的那样工作，它在新标签中打开图像。
火线功能：

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;

我使用file-saver依赖项为我的下载目的，它的工作很好。
文件下载功能：

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
当我按下载时，我得到以下结果：
Open in new tab

react-native

来源：https://stackoverflow.com/questions/74842629/download-image-from-firebase-react-js

2条答案

按热度按时间

mlnl4t2r1#

停止组合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存储在组件的状态中，然后从该状态中使用它，如中所示：