ng2-file-uploader 需要刷新浏览器

Question

我在 Angular 10 项目中使用 ng2-file-upload 上传用户照片。上传过程很顺利。唯一的问题是我必须刷新浏览器才能显示新上传的照片。但是，我希望任何新上传的照片立即显示在照片列表中，而不是用户必须通过刷新浏览器采取额外步骤才能显示新添加的照片。

这是我的component.ts

ngOnInit(): void {
    this.initializeUploader();
    this.loadStoreUserPhotos();
  }

  fileOverBase(e: any) {
    this.hasBaseDropzoneOver = e;  // here e for event
  }      

  uploadFile(file: File) {
    this.memberService.uploadImage(file).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.UploadProgress:
          this.progress = Math.round(event.loaded / event.total * 100);
          break;
        case HttpEventType.Response:          
          setTimeout(() => {
            this.progress = 0;
            this.addPhotoMode = false;
          }, 1500);
      }
    });        
  }
  
  loadStoreUserPhotos() {
    this.accountService.getStoreUserPhotos(this.member.userId).subscribe((response: IPhoto[]) => {     
      this.photos = response;
    })
  }      

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/add-photo',
      authToken: 'Bearer ' + this.user.token,
      isHTML5: true,
      allowedFileType: ['image'],
      removeAfterUpload: true,
      autoUpload: false,
      maxFileSize: 10 * 1024 * 1024
    });
    
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    }    

    this.uploader.onSuccessItem = (item, response, status, headers) => {      
      if (response) {
        const photo: IPhoto = JSON.parse(response);        
        this.photos.push(photo);
        this.user.photoUrl = photo.photoUrl;            
      }
      *this.loadStoreUserPhotos();*
    }
  }

在 initializeUpload 方法中，我应该在末尾添加 this.loadStoreUserPhotos() 以在上传后重新加载所有照片，包括新上传成功的照片。但是，这条线根本没有帮助。用户仍然需要执行额外的步骤 - 刷新浏览器。

我的html被简化如下

<div class="col-2"  *ngFor="let photo of photos">
        <img src="{{photo.photoUrl}}" alt="{{user.username}}" class="img-thumbnail" 
</div>

谁能帮帮我！非常感谢！

Answer 1

正如Aluan指出的，loadStoreUserPhotos()实际上并没有被执行。我的解决办法是在uploadFile()的末尾加上setTimeout(() => window.location.reload(), 2000)。事实上，解决办法只是简单地刷新当前页面。设置延迟时间是为了让用户捕捉到任何屏幕警告或通知消息。

ng2-file-uploader 需要刷新浏览器

ng2-file-uploader requires browser refresh

javascript

file-upload

http

typescript

angular