我正在使用 Vue/vuex 和 firebase 构建这个简单的应用程序，我想方便用户上传图像，一旦应用程序更新，这些图像就会从 firebase 存储中获取，使用新上传的图像修改当前数据库这是我的代码：
createMeet({ commit, getters }, payload) {
const newMeet = {
title: payload.title,
description: payload.description,
location: payload.location,
date: payload.date,
video_url: payload.video_url,
idCreator: getters.getUser.id
}
let image_url;
let key;
firebase.database().ref('meetUps').push(newMeet)
.then((data) => {
console.log(data)
key = data.key
return key
})
.then(key => {
const filename = payload.image.name
const fileExtension = filename.slice(filename.lastIndexOf('.'))
return firebase.storage().ref('meetUps/' + key + '.' + fileExtension).put(payload.image)
})---the image get storaged in the firebase storage
.then(fileData => {
image_url = fileData.metadata.downloadURLs()
return firebase.database().ref('meetUps/').child(key).update({ image_url: image_url })
})--------->updating in the database the storaged object in there passing a new paranmeter
image_url, with a new value contained in variable iimage_url
.then(() => {
commit('meetsCreator', {
...newMeet,
image_url: image_url,------------>putting changes in some mutation which modifies the state
id: key,
})
})
.catch(error => {
console.log(error)
})
// commit('meetsCreator',newMeet)
},
图像被推送到 firebase 存储，但是一旦我尝试修改数据库，使用 downloadUrls 添加这个新元素（图像），就行不通了。有什么建议吗？....提前致谢！！！
您需要使用getDownloadURL()JavaScript SDK 中的方法，该方法是异步的，并返回使用下载 URL 解析的 Promise。
因此，以下应该可以解决问题：
//...
firebase.database().ref('meetUps').push(newMeet)
.then(ref => {
key = ref.key
const filename = payload.image.name
const fileExtension = filename.slice(filename.lastIndexOf('.'))
return firebase.storage().ref('meetUps/' + key + '.' + fileExtension).put(payload.image)
})
.then(uploadTaskSnapshot => {
return uploadTaskSnapshot.ref.getDownloadURL();
.then(url => {
return firebase.database().ref('meetUps/').child(key).update({ image_url: url })
})
//....
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句