从 foreach 中删除单个图像（Firebase 存储）答案

【问题标题】：Delete a single image from a foreach (Firebase Storage)从 foreach 中删除单个图像（Firebase 存储）
【发布时间】：2022-01-11 08:18:21
【问题描述】：

我有一个forEach()，它显示了几张图片。如果需要，我希望删除这些内容。我从 Firestore 获取图像的 src 和图像的路径/文件名，以在我的网站上与图像一起显示（它们被上传到存储和 Firestore）。

如何从所有图片中识别出一张图片并仅删除那张图片？

JS代码

const i = query(collection(db, "teamImages"));
const unsubscribe = onSnapshot(i, (querySnapshot) => {
  const teams = document.querySelector('.teamimages');

  querySnapshot.forEach((doc) => {
    const docData = doc.data();
    const article = teams.appendChild(document.createElement('article'));
    article.innerHTML = `
        <p class="path"></p>
        <img class="team-image">
    `;
    article.children[0].textContent = docData.path;
    article.children[1].src = docData.url;

    console.log("Current data: ", docData);
  });


  document.getElementById("team-image").addEventListener("click", function deleteImage() {

const filename = document.getElementById("path").innerHTML;

    if (confirm('Are you sure you want to delete this image')) {

        const imageDeleteRef = ref(storage, filename);

  // Delete the file
            deleteObject(imageDeleteRef).then(() => {

  // File deleted successfully & delete firestorm reference

           deleteDoc(doc(db, teamImage, filename));


            }).catch((error) => {
  // Uh-oh, an error occurred!
            });

    } else {
      // Do nothing!
      console.log('Image not deleted');

    };

  });
});

图像位于文章部分 (createElement)。

当我尝试放入任何 Firebase 删除代码时，我遇到了一些未定义和 null 错误。

我只是不确定如何定义图像文件名以用作删除文件的参考。

【问题讨论】：

你能分享完整的代码吗？其中还包括函数 deleteImage() ？
是的，我会添加它，但这只是标准的 Firebase 代码。当我将它放在 forEach() 的括号内时它起作用了，但该消息出现了 3 次。
我在下面发布了一个答案。它解决了您的问题吗？

标签： javascript firebase google-cloud-firestore firebase-storage

【解决方案1】：

问题似乎与您如何设置和获取存储数据有关。

您正在尝试使用构建参考

'const imageDeleteRef = ref(storage, filename);'

从sn -p不清楚什么是storage，可以打印出来
- 存储
-文件名
控制台以验证您正在获取正确的元素。

你在这里设置数据

 article.innerHTML = `
        <p class="path"></p>
        <img class="team-image">
    `;
    article.children[0].textContent = docData.path;
    article.children[1].src = docData.url;

这会产生

<p class="path">docData.path</p>
<img class="team-image" src="{docData.url}">

那么你正在尝试得到

"const filename = document.getElementById("path").innerHTML;"

您正在使用https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById，其中名称设置在名为“path”的类下，您可能应该使用

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

const 文件名 = document.getElementsByClassName("path"),innerHTML;

或者您可以将类更改为 id

来自

 article.innerHTML = `
        <p class="path"></p>
        <img class="team-image">
    `;

到

 article.innerHTML = `
        <p id="path"></p>
        <img id="team-image">
    `;

【讨论】：