0

我可能想多了，但我有一个头像配置文件组件，可以让用户更新他们的头像图像。我使用谷歌云存储作为图像托管，然后我使用图像 CDN (imagekit) 来处理图像优化/缓存。一切正常......但是，我确实有一个小烦恼，我想知道是否有人可以帮助我：

首先，这是我的代码（将帮助解释我遇到的问题）：

    async avatarChangeHandler(e) {
      this.overlayShow = true //<-- show a loading indicator
      try {
        if (e.target.files.length) {
          this.image = await new Promise((resolve) => {
            const reader = new FileReader()
            reader.onload = (e) => {
              resolve(e.target.result)
            }
            reader.readAsDataURL(e.target.files[0])
          })
          await this.photoUpload() //<-- upload image to Google storage and return new image URL
          await this.updateAvatar() //<-- update user's profile in the database with new URL
          await this.$store.dispatch('getUserProfile', this.currentUser) //<-- grab updated profile
          console.log('updating...done')
          this.overlayShow = false //<-- terminate the loading indicator

问题是用户配置文件使用新图像 URL 更新并且比图像 CDN 更快地获取......这意味着overlayShow已经设置为 false 并且仍然显示旧图像一秒钟左右（取决于需要优化）。

overlayShow在使用新图像完成图像 CDN 之前，我该怎么做才能确保未将其设置为 false？谢谢，我意识到这可能不可行，但正在寻找有关方法的建议或建议。谢谢！

4

0 回答 0