[英]How can I delete images from Firebase Storage??(react)
I want to delete images from firebase storage.我想从 firebase 存储中删除图像。 This below code is my whole code.下面的代码是我的全部代码。
import { useState, useEffect } from "react";
import NavBar from "./Tool/TopBar";
import styled from "styled-components";
import {storage} from "./Tool/Firebase";
import {ref, uploadBytes, listAll, getDownloadURL,deleteObject, getStorage} from "firebase/storage";
import {v4} from "uuid";
const Banner=()=>{
const[imageList, setImageList] = useState([]);
const imageRef = ref(storage,`image/${image.name + v4()}`);
// upload image
const uploadImage=(e)=>{
if(image){
uploadBytes(imageRef, image).then((snap)=>{
getDownloadURL(snap.ref).then((url)=>{
setImageList((prev)=>[...prev, url])
})
})
} else {
alert("Do upload image!")
}
}
useEffect(()=>{
listAll(imageListReg).then((response)=>{
console.log(response);
response.items.forEach((item)=>{
getDownloadURL(item).then((url)=>{
setImageList((prev)=>[...prev,url])
})
})
})
},[])
const onClickDelete=()=>{
const storage = getStorage();
console.log(imageRef);
const desertRef = ref(storage,`image/study.png`)
deleteObject(desertRef).then(()=>{
console.log("delete success");
}).catch((error)=>{
console.log("delete error");
})
}
return(
<div className="tableContainer">
<table className="tableWrap">
<tbody>
<tr>
<th>title</th>
<td><input type="text" value={title}/></td>
</tr>
<tr>
<th>imageURL</th>
<td><input type="text" value={adUrl}/></td>
</tr>
<tr>
<th>image</th>
<td><input type="file" onChange={(e)=>{setImage(e.target.files[0])}}/>
<button onClick={uploadImage}>UploadBanner</button>
</td>
>! uploading image is not problem
</tr>
</tbody>
</table>
</div>
<div className="preview">
{imageList.map((url) => ( <ul key={url}>
<li><img src={url} alt=""/>
<button className="deleteImage" onClick={onClickDelete}>DeleteBanner</button>
</li></ul>
))}
</div>
);
}
export default Banner;
The problem is the delete function. I have read Firebase documentation, and this would be possible with the deleteObject function. https://firebase.google.com/docs/storage/web/delete-files#delete_a_file I wonder how can I find firebase storage url.问题是删除 function。我已阅读 Firebase 文档,这可以通过 deleteObject function 实现。https://firebase.google.com/docs/storage/web/delete-files#delete_a_file我想知道如何找到firebase 存储 url。
const onClickDelete=()=>{
const storage = getStorage();
console.log(imageRef);
const desertRef = ref(storage,`image/study.png`) // how can I find url (image/study.png)
deleteObject(desertRef).then(()=>{
console.log("delete success");
}).catch((error)=>{
console.log("delete error");
})
}
thank you谢谢你
You can do so, either by removing them manually, form the console or by setting the some variation of following code that fulfill your needs您可以通过手动删除它们,形成控制台或通过设置满足您需要的以下代码的一些变体来这样做
if (img) {
const storage = getStorage();
const storageRef = ref(storage, `profiles/${userId}/profile-image`);
await deleteObject(storageRef);
}
Don't forget the imports… though别忘了进口……虽然
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.