“AngularFireUploadTask"类型上不存在属性“downloadURL" [英] Property 'downloadURL' does not exist on type 'AngularFireUploadTask'
本文介绍了“AngularFireUploadTask"类型上不存在属性“downloadURL"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
线路有问题
<块引用>this.downloadURL = task.downloadURL()
使用 AngularFireUploadTask 即使我导入了它.
import { Component, OnInit } from '@angular/core';从 '../../core/auth.service' 导入 { AuthService };从 'angularfire2/storage' 导入 { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask };从 '../post.service' 导入 { PostService };从 'rxjs/Observable' 导入 { Observable };@成分({选择器:'app-post-dashboard',templateUrl: './post-dashboard.component.html',styleUrls: ['./post-dashboard.component.css']})导出类 PostDashboardComponent 实现 OnInit {标题:字符串;图像:字符串=空;内容:字符串;buttonText: string = "创建帖子"上传百分比:可观察的<数字>downloadURL: Observable构造函数(私人身份验证:AuthService,私人邮政服务:邮政服务,私有存储:AngularFireStorage) { }ngOnInit() {}上传图片(事件){const 文件 = event.target.files[0]const path = `posts/${file.name}`if (file.type.split('/')[0] !== 'image') {返回警报('仅图像文件')} 别的 {const task = this.storage.upload(path, file)this.downloadURL = task.downloadURL()this.uploadPercent = task.percentageChanges()console.log('图片上传!')this.downloadURL.subscribe(url => this.image = url)}}
<块引用>
消息是:类型上不存在属性 'downloadURL''AngularFireUploadTask'.".
我应该怎么做才不会出现这个问题.
解决方案
const task = this.storage.upload(path, file);const ref = this.storage.ref(path);this.uploadPercent = task.percentageChanges();console.log('图片上传!');task.snapshotChanges().pipe(完成(() => {this.downloadURL = ref.getDownloadURL()this.downloadURL.subscribe(url => (this.image = url));})).订阅();
更新 - 8/30/20
对于那些想要更简洁代码的人,请使用 promise(在异步函数中等待):
const task = this.storage.upload(path, file);const ref = this.storage.ref(path);this.uploadPercent = task.percentageChanges();//上传图片,保存url等待任务;console.log('图片上传!');this.image = 等待 ref.getDownloadURL().toPromise();
I have a problem with the line
this.downloadURL = task.downloadURL()
with AngularFireUploadTask even though I imported it.
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../core/auth.service';
import { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask } from 'angularfire2/storage';
import { PostService } from '../post.service';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-post-dashboard',
templateUrl: './post-dashboard.component.html',
styleUrls: ['./post-dashboard.component.css']
})
export class PostDashboardComponent implements OnInit {
title: string;
image: string = null;
content: string;
buttonText: string = "Create Post"
uploadPercent: Observable<number>
downloadURL: Observable<string>
constructor(
private auth: AuthService,
private postService: PostService,
private storage: AngularFireStorage
) { }
ngOnInit() {
}
uploadImage(event) {
const file = event.target.files[0]
const path = `posts/${file.name}`
if (file.type.split('/')[0] !== 'image') {
return alert('only image files')
} else {
const task = this.storage.upload(path, file)
this.downloadURL = task.downloadURL()
this.uploadPercent = task.percentageChanges()
console.log('Image Uploaded!')
this.downloadURL.subscribe(url => this.image = url)
}
}
The message is:"Property 'downloadURL' does not exist on type 'AngularFireUploadTask'.".
What should I do to not have this problem.
解决方案
const task = this.storage.upload(path, file);
const ref = this.storage.ref(path);
this.uploadPercent = task.percentageChanges();
console.log('Image uploaded!');
task.snapshotChanges().pipe(
finalize(() => {
this.downloadURL = ref.getDownloadURL()
this.downloadURL.subscribe(url => (this.image = url));
})
)
.subscribe();
The actual change in code you will need from this video.
UPDATE - 8/30/20
For those of you that want cleaner code, use promises (await in an async function):
const task = this.storage.upload(path, file);
const ref = this.storage.ref(path);
this.uploadPercent = task.percentageChanges();
// upload image, save url
await task;
console.log('Image uploaded!');
this.image = await ref.getDownloadURL().toPromise();
这篇关于“AngularFireUploadTask"类型上不存在属性“downloadURL"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文