javascript - 如何从 firebase 存储 state_changed 事件中获取下载图片 url？

Question

这段代码应该可以工作，但无论我做什么，我似乎都无法获得下载 URL。我正在使用 vue.js。这是文件上传的代码。

下面您可以看到显示控制台日志的图像。它成功保存了图像，唯一的问题是我没有得到 downloadURL，似乎没有。

// upload file
    uploadFile(file, metadata) {
            if(file === null) return false

            let pathToUpload = this.currentChannel.id
            // parent means Messages.vue getMessagesRef() that returns either public or private channel
            let ref = this.$parent.getMessagesRef()
            // getPath() refers to the path below
            let filePath = this.getPath() + '/' + uuidV4() + '.jpg'

            // upload file
            this.uploadTask = this.storageRef.child(filePath).put(file, metadata)
            // upload state
            this.uploadState = "uploading"


            // on upload state change
            this.uploadTask.on('state_changed', snapshot => {
                console.log('image uploaded/state_changed in storage: ', snapshot)
                // Upload en cours
                let percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                // $("#uploadedFile").progress("set percent", percent)
                $(".progress-bar").css("width", percent+'%')
            }, error => {
                // Error
                this.errors.push(error.message)
                this.uploadState = 'error'
                this.uploadTask = null
            }, () => {
                // Upload finished
                this.uploadState = 'done'
                console.log('done upload')
                // reset form
                this.$refs.file_modal.resetForm()
                // recover the url of file
                let fileUrl = this.uploadTask.snapshot.downloadURL
                console.log('downloadURL(snapshot) from firebase: ', this.uploadTask.snapshot)

                // sendFileMessage() will pass file as parameter on upload
                this.sendFileMessage(fileUrl, ref, pathToUpload)
            })
    },

Console.log() 结果:

感谢您的帮助!

Answer 1

根据 firebase document , 你必须在完成的回调中调用 uploadTask.snapshot.ref.getDownloadURL

uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
  console.log('File available at', downloadURL);
});