Hola, estoy tratando de obtener la URL de una imagen después de cargarla en el almacenamiento de Firebase. En el código comentado a continuación, muestro algunas cosas que he probado. He subido correctamente una imagen a Firebase Storage.
async uploadAvatar({ state }, { authId, file, filename }) { if (!file) return null authId = authId || state.authId filename = filename || file.name try { const storage = getStorage() const storageRef = ref( storage, `uploads/${authId}/images/${Date.now()}-${filename}` ) // This is 1st way I tried // This sucessfully uploads image to storage // uploadBytes(storageRef, file) // // const snapshot = await uploadBytes(storageRef, file) // This throws a not found error // const url = await getDownloadURL(storageRef) // console.log('URL', url) // return url // // This sucessfully uploads image to storage uploadBytes(storageRef, file).then((snapshot) => { console.log('Uploaded avatar!') const avatarUrl = getDownloadURL(storageRef) .then((url) => { // This is correct url console.log('URL', url) return url }) .catch((err) => { console.log('Error with file url', err) }) // This logs promise pending with correct url inside console.log('avatarUrl', avatarUrl) return avatarUrl }) } catch (error) { const { addNotification } = useNotifications() addNotification({ message: 'Error uploading avatar image', type: 'error' }) } }Todavía no está devolviendo nada del código de nivel superior en su función uploadAvatar .
async uploadAvatar({ state }, { authId, file, filename }) { if (!file) return null authId = authId || state.authId filename = filename || file.name try { const storage = getStorage() const storageRef = ref( storage, `uploads/${authId}/images/${Date.now()}-${filename}` ) // 👇 return uploadBytes(storageRef, file).then((snapshot) => { console.log('Uploaded avatar!') const avatarUrl = getDownloadURL(storageRef) .then((url) => { // This is correct url console.log('URL', url) return url }) .catch((err) => { console.log('Error with file url', err) }) // This logs promise pending with correct url inside console.log('avatarUrl', avatarUrl) return avatarUrl }) } catch (error) { const { addNotification } = useNotifications() addNotification({ message: 'Error uploading avatar image', type: 'error' }) } }Sin embargo, sinceramente, todo el código que maneja la URL de descarga aquí parece innecesario, por lo que recomiendo simplificarlo a:
async uploadAvatar({ state }, { authId, file, filename }) { if (!file) return null authId = authId || state.authId filename = filename || file.name try { const storage = getStorage() const storageRef = ref( storage, `uploads/${authId}/images/${Date.now()}-${filename}` ) return uploadBytes(storageRef, file).then((snapshot) => { return getDownloadURL(storageRef); }) } catch (error) { const { addNotification } = useNotifications() addNotification({ message: 'Error uploading avatar image', type: 'error' }) } }