上传图片后，Vue Firebase 无法获取图片 url

Posted 2023-02-22

【中文标题】上传图片后，Vue Firebase 无法获取图片 url

【英文标题】：Vue Firebase cannot not fetch image url after uploading image

【发布时间】：2021-01-24 15:25:09

【问题描述】：

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”的类型检查失败。期望的字符串，对象，得到了 Promise

【参考方案1】：

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

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