我想要父组件中的 url 并希望将其保存在 imageUrl 状态中，url 在 handleUploadImage 函数中（图像下载 url 是我在父组件中需要的 url）
myFunc.js
export const handleUploadImage = (image: any, folderName = "adhaar") =>{
let file = image;
const storage = firebase.storage();
const storageRef = storage.ref();
const uploadTask = storageRef.child(`${folderName}/` + file.name).put(file);
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) =>{
storageRef.child(file.name).getDownloadURL().then(url => {
console.log(url)
})
},(error) =>{
throw error
},() => {
uploadTask.snapshot.ref.getDownloadURL().then((url) =>{
console.log("image download url:", url)
})
}
)
}
父组件
const ParentComponent = ()=>
{
const [imageUrl setImageUrl] =useState()
const getUrl = ()=>
{
handleUploadImage(image)
setImageUrl()
}
return(
<button onClick={getUrl}> Get Url </button>
)
}
只需将您的 setImage 传递给孩子并将其设置在那里，就像这样：
const ParentComponent = ()=>
{
const [imageUrl, setImageUrl] =useState()
const getUrl = ()=>
{
handleUploadImage(image, setImage)
}
return(
<button onClick={getUrl}> Get Url </button>
)
}
/////////////////////
export const handleUploadImage = (image, setImage) =>
new Promise((resolve, reject) => {
let file = image;
const storage = firebase.storage();
const storageRef = storage.ref();
const uploadTask = storageRef.child(`${folderName}/` + file.name).put(file);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {
storageRef
.child(file.name)
.getDownloadURL()
.then((url) => {
console.log(url);
// where you need your url
setImage(url)
});
},
(error) => {
reject(error);
},
() => {
uploadTask.snapshot.ref.getDownloadURL().then((url) => {
console.log('image download url:', url);
// or set image here
setImage(url)
resolve(url); // this is important
});
}
);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句