angularjs - 上传任务快照问题
问题描述
我在项目中显示图像时遇到问题。我希望在.subscribe任务中下载 url 与图像相同。所以它可以显示它。但是当我这样做时,它会显示一条错误消息:
类型“UploadTaskSnapshot”不可分配给类型“字符串”。
这是代码:
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}`
const fileRef = this.storage.ref(path);
if (file.type.split('/')[0] !== 'image') {
return alert('only image files')
} else {
const task = this.storage.upload(path, file)
this.uploadPercent = task.percentageChanges();
task.snapshotChanges().pipe(
finalize(() => this.downloadURL = fileRef.getDownloadURL() )
)
.subscribe(url => (this.image = url))
console.log('Image Uploaded!');
因为我是一个业余爱好者,我应该改变什么才能让它工作。谢谢您的帮助。
解决方案
我找到了答案,是这样的:
uploadImage(event) {
const file = event.target.files[0]
const path = `posts/${file.name}`
const fileRef = this.storage.ref(path);
if (file.type.split('/')[0] !== 'image') {
return alert('only image files')
} else {
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();
推荐阅读
- laravel - 使用两个数据透视表在 laravel 中获取多对多关系的数据
- console - 如何在 Google 控制台上将包名称更改为小写?
- ios - SwiftUI:[未知进程名称] CGAffineTransformInvert:奇异矩阵错误
- json - Spring Api 从响应中删除空字段
- python - 带有 Automap Base 的 sqlalchemy-continuum
- python - 熊猫中的数据框 C 或 Fortran 排序
- javascript - 'ReadableStream 类型的参数
' 不可分配给“ReadableStream”类型的参数 - html - 使用 sortable() 时无法对框进行排序
- python - 在python中,如何在不替换特定列的情况下生成随机抽样?
- arrays - 在映射函数之后遍历数组中的每个属性,然后返回新数组