Firebase：Vue.js：无法将存储与数据库连接

Posted 2023-02-22

【中文标题】Firebase：Vue.js：无法将存储与数据库连接

【英文标题】：Firebase: Vue.js : Not able to connect storage with database

【发布时间】：2021-06-30 03:09:51

【问题描述】：

我正在使用 firebase 开发我的第一个 Vue-Project。 我想用特定的图像和其他数据创建位置。

我正在处理一个有点过时的教程。目前，我正在努力解决 firebase 存储与 firebase 数据库的连接问题。

我无法将可下载的 imageUrl 推送到 firebase 存储并将其存储在数据库中。

你们能帮帮我吗？ 谢谢

createLocation( commit, getters, payload) 
        const location = 
            title: payload.title,
            location: payload.location,
            description: payload.description,
            creationDate: payload.creationDate,
            rating: payload.rating,
            coordinates: payload.coordinates,
            filters: payload.filters,
            creatorId: getters.user.id
        
        let imageUrl
        let key
        firebase.database().ref('locations').push(location)
            .then((data) => 
                key = data.key
                return key
            )
            .then(key => 
                const filename = payload.image.name
                const ext = filename.slice(filename.lastIndexOf('.'))
                console.log(payload.image)
                return firebase.storage().ref('locations/' + key + ext).put(payload.image)
            )
            .then(fileData => 
                imageUrl = fileData.metadata.getDownloadURL
                return firebase.database().ref('meetups').child(key).update(imageUrl: imageUrl)
              )
            .then(() => 
                commit('createLocation', 
                ...location,
                imageUrl:imageUrl,
                id: key
                )
            )
            .catch((error) => 
                console.log(error)
            )
    ,

【参考方案1】：

如果您查看metadata.downloadURL 的参考文档，它会说：

已弃用

请改用Reference.getDownloadURL。此属性将在未来的版本中移除。

现在确定文件的下载 URL 需要再次往返服务器，因此您需要另一个 then 块：

firebase.database().ref('locations').push(location)
    ...
    .then(key => 
        const filename = payload.image.name
        const ext = filename.slice(filename.lastIndexOf('.'))
        console.log(payload.image)
        return firebase.storage().ref('locations/' + key + ext).put(payload.image)
    )
    .then(fileData => 
        return fileData.ref.getDownloadURL();
    )
    .then(imageUrl => 
        return firebase.database().ref('meetups').child(key).update(imageUrl: imageUrl)
    )
    ...