下载文件后的 url href 错误

Question

我有以下代码，我想下载存储在 Firebase 存储中的文件：

const downloadFile = (url, filename) => {
    const link = document.createElement('a');
    link.href = url;
    console.log(url)
    link.download = filename;
    link.click();
    link.remove();
 };

拉取文件：

try {
      const files = [];
            const listRef = ref(storage, `files/events/${path}/thumnails`);
            const {items} = await listAll(listRef);
            for (const itemRef of items) {
                const downloadURL = await getDownloadURL(itemRef);

                await downloadFile(downloadURL, itemRef.name);
                files.push(
                        {
                            imgName: itemRef.name,
                            imgUrl: downloadURL
                        }
                    );
            }
            setImages(files);
        } catch (error) {
          console.error(error);
        }

我收到以下错误：

404 错误请求 https://firebasestorage.googleapis.com/v0/b/boda-1c364.appspot.com/o/files/events/x5JlZKysM7NhXx1Awv6ljGY3jUA2/thumnails/9ED15BA2-A95B-4A2E-8BF5-24743F8FCF8B_200x200.jpeg？ alt=媒体&令牌=ee3c5679 -a17c-4a63-b650-506fd1fde654

这是将 downloadLinkUrl 设置为 img src 后出现在我的 img 标签中的内容，并且图像确实显示正确。

https://firebasestorage.googleapis.com/v0/b/boda-1c364.appspot.com/o/files%2Fevents%2Fx5JlZKysM7NhXx1Awv6ljGY3jUA2%2Fthumnails%2F9ED15BA2-A95B-4A2E-8BF5-24743F8FCF8B_2 00x200.jpeg?alt=媒体&令牌= ee3c5679-a17c-4a63-b650-506fd1fde654

Answer 1

您的文件下载功能中出现了错误...

const downloadFile = (url, filename) => {
    const link = document.createElement('a');
    link.href = url;
    console.log(url)
    link.download = filename;
    link.click();
    link.remove();   <-- comment this line out
 };

您创建了一个临时元素，该元素未写入 DOM 并且很好，但随后尝试在尚未将其添加到 DOM 时将其从 DOM 中删除！