Vue Firebase在上传图像后无法获取图像url

Question

createMeetup({ commit, getters }, payload) {
const meetup = {
title: payload.title,
location: payload.location,
desciption: payload.desciption,
date: payload.date.toISOString(),
creatorId: getters.user.id
};
let imageUrl;
let key;
firebaseApp
.database()
.ref("meetups")
.push(meetup)
.then(data => {
key = data.key;
return key;
})
.then(key => {
const filename = payload.image.name;
const ext = filename.slice(filename.lastIndexOf("."));
return firebaseApp
.storage()
.ref("meetups/" + key + "." + ext)
.put(payload.image);
})
.then(fileData => {
// TODO: Image ref not found
imageUrl = fileData.ref.getDownloadURL();
return firebaseApp
.database()
.ref("meetups")
.child(key)
.update({ imageUrl: imageUrl });
})
.then(() => {
commit("createMeetup", {
...meetup,
imageUrl: imageUrl,
id: key
});
})
.catch(err => {
console.log(err);
});
},

在给出错误的TODO部分之后。我认为它提供了promise，但不知道如何处理它。错误是Invalid prop:type check failed for prop"src"；。应为字符串，对象，得到Promise

Answer 1

getDownloadURL((返回一个promise，而不是字符串。您需要使用promise异步获取URL，如文档中所示。

...
.then(fileData => {
return fileData.ref.getDownloadURL();
})
.then(imageUrl => {
return firebaseApp
.database()
.ref("meetups")
.child(key)
.update({ imageUrl: imageUrl });
})
...