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部分出现错误之后。我认为它提供了希望，但无法弄清楚如何处理它。错误是无效的道具：道具“ src”的类型检查失败。期望的字符串，对象，得到了承诺

Answer 1

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

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

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

1 个答案: