React中如何将图片上传函数返回的URL传递给父组件存储

第一步：改造handleUploadImage函数（myFunc.js） #

将原函数封装为Promise，对外返回上传成功后的图片URL，同时修复原代码中存储路径不匹配的问题：

export const handleUploadImage = (image: any, folderName = "adhaar") => {
  return new Promise((resolve, reject) => {
    const file = image;
    const storage = firebase.storage();
    const storageRef = storage.ref();
    const fileRef = storageRef.child(`${folderName}/${file.name}`);
    const uploadTask = fileRef.put(file);
  
    uploadTask.on(
      firebase.storage.TaskEvent.STATE_CHANGED,
      // 若不需要展示上传进度，这个回调可以直接删除
      (snapshot) => {
        // 原逻辑路径缺少folderName，会导致找不到文件，已修正
        fileRef.getDownloadURL().then(url => { 
          console.log("实时获取的url:", url)
        })        
      },
      (error) => {
        reject(error)
      },
      () => {        
        uploadTask.snapshot.ref.getDownloadURL().then((url) =>{           
          console.log("最终图片下载url:", url)
          resolve(url)
        })  
     }
   ) 
  })
}

第二步：修改父组件代码 #

修正原代码中useState语法错误，通过async/await获取异步返回的URL后更新状态：

const ParentComponent = () => {
    // 修正原语法缺少的逗号
    const [imageUrl, setImageUrl] = useState()

    const getUrl = async () => {
      try {
        // 等待上传完成拿到URL
        const url = await handleUploadImage(image)
        setImageUrl(url)
      } catch (err) {
        // 按需处理上传错误
        console.error("图片上传失败：", err)
      }
    }

    return (
      <button onClick={getUrl}>获取URL</button>
    )
}

调整说明 #

• 若不需要实时监控上传进度，可以直接删除STATE_CHANGED事件对应的snapshot回调，减少不必要的URL请求
• 所有上传错误会通过Promise抛出，父组件可根据业务需求增加错误提示逻辑
• 拿到的最终URL已经是可直接访问的资源地址，存入imageUrl状态后可直接用于img标签的src属性等场景

内容的提问来源于stack exchange，提问作者asif kaif