从 foreach 中删除单个图像(Firebase 存储)
Posted
技术标签:
【中文标题】从 foreach 中删除单个图像(Firebase 存储)【英文标题】:Delete a single image from a foreach (Firebase Storage) 【发布时间】: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 次。 我在下面发布了一个答案。它解决了您的问题吗? 【参考方案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.aspconst 文件名 = 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">
`;
【讨论】:
以上是关于从 foreach 中删除单个图像(Firebase 存储)的主要内容,如果未能解决你的问题,请参考以下文章