javascript - Angular - FileReader() 没有获得任何路径

Question

我尝试在对话框中传递图像，用户可以通过cropperjs裁剪图像，然后可以上传它，但有时 FileReader() 没有获得任何路径。

这很奇怪，有时它可以工作，但大多数时候我的变量是空的...我认为它是随机的，因为我找不到获取 URL 的模式。

该组件.ts

  constructor(private route: ActivatedRoute, public dialog: MatDialog,) { }
  @Input() user: any
  @Input() userProfile: any
  @Input() userPosts: any
  imageSource: any = null;

  ngOnInit(): void {
    this.route.data.subscribe((data: {user: any}) => { this.user = data.user;});
    this.route.data.subscribe((data: {userProfile: any}) => { this.userProfile = data.userProfile;});
    this.route.data.subscribe((data: {userPosts: any}) => { this.userPosts = data.userPosts;});
    console.log(this.userProfile)
  }

  openDialog(src:string): void {
    const dialogRef = this.dialog.open(UserImgDialogComponent, {
      width: '500px',
      minHeight: '350px',
      data: src,
    });

    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes')
      }
    })
  }

  uploadFile($event) {

    if ($event.target.files && $event.target.files[0]) {
      const file = $event.target.files[0];

      const reader = new FileReader();
      reader.readAsDataURL(file)
      reader.onload = e => this.imageSource = reader.result;
      this.openDialog(this.imageSource);
    }
}

}

这是我的html

 <div class="UserImageDiv">
        <img [src]="userProfile.profileImagePath" class="UserImage">
        <button mat-icon-button matTooltip="Profilbild ändern" class='changeUserImg' (click)="uploader.click()">
          <mat-icon>add_a_photo</mat-icon>
        </button>
        <input hidden type="file" #uploader (change)="uploadFile($event)" />
      </div>

有人可以帮我吗？ 还有其他方法获取图像上传的路径吗？

Answer 1

我在这里看到多个问题。

1. 您不需要 3 个单独的 route 订阅。您可以在单个订阅中分配所有属性

ngOnInit(): void {
  this.route.data.subscribe((data: any) => {
    this.user = data.user;
    this.userProfile = data.userProfile;
    this.userPosts = data.userPosts;
    
    console.log(this.userProfile); // <-- should be inside the subscription
  });
}

此外，console.log(this.userProfile) 应位于订阅内。该变量是异步分配的，如果它在订阅之外，可能尚未分配任何值。

图像的问题是相同的。变量 this.imageSource 在 onload 回调中被异步分配。因此，调用 this.openDialog 应该位于回调内部。

uploadFile($event) {
  if ($event.target.files && $event.target.files[0]) {
    const file = $event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file)
    reader.onload = (e: any) => {
      this.imageSource = reader.result;
      this.openDialog(this.imageSource); // <-- should be inside the callback
    }
  }
}

您可以了解有关异步数据的更多信息 here .

^{纯/不纯管道的概念也与 Angular pipes 相关。并且它不适用于您看到您在模板中没有使用任何 Angular 管道。如果你是 Angular 的新手，我建议你浏览一下他们的 tutorial 。它介绍了一些基础知识。}