从firebase react Js下载图片

Question

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

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;

我正在使用文件保存程序依赖项来下载，它工作得很好。

文件下载功能:

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

从firebase函数获取的firebase URL:

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

当我按下下载，我得到下面的结果:

在新选项卡中打开

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;
}

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

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

Answer 2

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