Vue 3 Firebase 9 Vuex，在上传到存储后的操作中获取 URL 文件

Question

您好，我想在上传到 Firebase 存储后获取图像的 url。在下面的注释代码中，我展示了一些我尝试过的东西。我已成功将图像上传到 Firebase 存储。

async uploadAvatar({ state }, { authId, file, filename }) {
      if (!file) return null
      authId = authId || state.authId
      filename = filename || file.name
      try {
        const storage = getStorage()
        const storageRef = ref(
          storage,
          `uploads/${authId}/images/${Date.now()}-${filename}`
        )
        // This is 1st way I tried
        // This sucessfully uploads image to storage
        // uploadBytes(storageRef, file)
        // // const snapshot = await uploadBytes(storageRef, file)
        // This throws a not found error
        // const url = await getDownloadURL(storageRef)
        // console.log('URL', url)
        // return url

        // // This sucessfully uploads image to storage
        uploadBytes(storageRef, file).then((snapshot) => {
          console.log('Uploaded avatar!')
          const avatarUrl = getDownloadURL(storageRef)
            .then((url) => {
              // This is correct url
              console.log('URL', url)
              return url
            })
            .catch((err) => {
              console.log('Error with file url', err)
            })
          // This logs promise pending with correct url inside
          console.log('avatarUrl', avatarUrl)
          return avatarUrl
        })
      } catch (error) {
        const { addNotification } = useNotifications()
        addNotification({
          message: 'Error uploading avatar image',
          type: 'error'
        })
      }
    }

Answer 1

您尚未从 uploadAvatar 函数中的 top-level 代码返回任何内容。

async uploadAvatar({ state }, { authId, file, filename }) {
  if (!file) return null
  authId = authId || state.authId
  filename = filename || file.name
  try {
    const storage = getStorage()
    const storageRef = ref(
      storage,
      `uploads/${authId}/images/${Date.now()}-${filename}`
    )

    // 
    return uploadBytes(storageRef, file).then((snapshot) => {
      console.log('Uploaded avatar!')
      const avatarUrl = getDownloadURL(storageRef)
        .then((url) => {
          // This is correct url
          console.log('URL', url)
          return url
        })
        .catch((err) => {
          console.log('Error with file url', err)
        })
      // This logs promise pending with correct url inside
      console.log('avatarUrl', avatarUrl)
      return avatarUrl
    })
  } catch (error) {
    const { addNotification } = useNotifications()
    addNotification({
      message: 'Error uploading avatar image',
      type: 'error'
    })
  }
}

老实说，这里处理下载 URL 的整个代码似乎没有必要，所以我建议简化为：

async uploadAvatar({ state }, { authId, file, filename }) {
  if (!file) return null
  authId = authId || state.authId
  filename = filename || file.name
  try {
    const storage = getStorage()
    const storageRef = ref(
      storage,
      `uploads/${authId}/images/${Date.now()}-${filename}`
    )

    return uploadBytes(storageRef, file).then((snapshot) => {      
      return getDownloadURL(storageRef);
    })
  } catch (error) {
    const { addNotification } = useNotifications()
    addNotification({
      message: 'Error uploading avatar image',
      type: 'error'
    })
  }
}

Vue 3 Firebase 9 Vuex，在上传到存储后的操作中获取 URL 文件

Vue 3 Firebase 9 Vuex, in actions get URL of file after uploading to storage

javascript

vuex

firebase-storage

vuejs3