angular - 使用angularfire将文件上传到firebase存储
问题描述
我正在使用 angularfire2 将图像上传到 firebase 存储。上传工作得很好,尽管我在等待我的代码下载 url 可用的时间上遇到了麻烦。这是选择文件时的代码
async onFilesAdded(event){
console.log("file added")
if (event.target.files.length > 0) {
const file = event.target.files[0];
console.log("File name is:" + file.name)
await this.dataSvc.pushUpload(file).then(
(res) => {
console.log("download url is::" + this.dataSvc.downloadURL)
},
(err) => console.log("fail to upload file:" + err)
)
}
}
我的服务实现如下
pushUpload(file: File) {
const filePath = '/' + file.name;
const fileRef = this.storage.ref(filePath);
return new Promise<any>((resolve, reject) => {
const task = this.storage.upload(filePath, file);
task.snapshotChanges().pipe(
finalize(() => this.downloadURL = fileRef.getDownloadURL() )
).subscribe(
res => resolve(res),
err => reject(err))
}
)
}
我希望等到承诺得到解决并看到下载网址。但我的代码似乎没有等待,我得到了未定义的 downloadUrl,几秒钟后,下载 url 实际显示在服务中。所以基本上我调用 pushUpload 的代码不会等待下载完成。
我从来没有在 finalize 中获得下载 url 的另一种变体
pushUpload(file: File) {
const path = '/' + file.name;
const ref = this.storage.ref(path);
let task = this.storage.upload(path, file);
let snapshot = task.snapshotChanges().pipe(
finalize( async() => {
this.downloadURL = await ref.getDownloadURL().toPromise();
console.log("download url i got is:" + this.downloadURL)
}),
);
}
解决方案
下载似乎正确完成。但是你用 observable 的第一个发射值来解决你的承诺snapshotChanges
,它没有属性,downloadURL
因此是未定义的结果。
您应该订阅fileRef.getDownloadURL()
observable 以获取您的 URL。
pushUpload(file: File) {
const filePath = '/' + file.name;
const fileRef = this.storage.ref(filePath);
return new Promise<any>((resolve, reject) => {
const task = this.storage.upload(filePath, file);
task.snapshotChanges().pipe(
finalize(() => fileRef.getDownloadURL().subscribe(
res => resolve(res),
err => reject(err));
)
).subscribe();
})
}
使用 promise 方法,代码看起来有点难看。我不知道您是否可以在订阅中订阅,我以前从未这样做过。
一旦snapshotChanges
observable 完成finalize
操作触发并订阅fileRef.getDownloadURL()
observable,这个 observable 应该立即发出 URL 并解析 promise。
我建议使用可观察的而不是创建新的承诺。
推荐阅读
- go - 为什么通道不关闭时没有死锁?
- javascript - node.js(javascript)中的系统范围互斥锁
- python - python类中的所有方法都表现得像静态
- machine-learning - 类别相关问题的损失函数设计
- node.js - TypeError:contract.test 不是函数 tronweb nodejs
- node.js - 节点发布请求正文被截断
- visual-studio - Visual Studio 代码过多地包装了 html
- azure - Azure Front Door 服务忽略 403 - 应用停止错误
- angular - angular 7 pwa 离线
- azure - SQL 中是否有 CREATE TYPE 的替代方案,因为 Azure SQL 数据仓库不支持 CREATE TYPE