Javascript 如何从firebase存储状态更改事件获取下载图像url?
这段代码应该可以工作,但无论我做什么,我似乎无法获得下载的URL。 我正在使用vue js。这是文件上传的代码 下面您可以看到显示控制台日志的图像。它成功地保存了图像,唯一的问题是我没有下载URL,似乎没有Javascript 如何从firebase存储状态更改事件获取下载图像url?,javascript,firebase,firebase-realtime-database,vue.js,firebase-storage,Javascript,Firebase,Firebase Realtime Database,Vue.js,Firebase Storage,这段代码应该可以工作,但无论我做什么,我似乎无法获得下载的URL。 我正在使用vue js。这是文件上传的代码 下面您可以看到显示控制台日志的图像。它成功地保存了图像,唯一的问题是我没有下载URL,似乎没有 // upload file uploadFile(file, metadata) { if(file === null) return false let pathToUpload = this.currentChannel.id
// 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()结果:
谢谢你的帮助 根据,您必须在完成的回调中调用uploadTask.snapshot.ref.getDownloadURL
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
});