предварительный просмотр загрузки файла angular 6 работает только после второй загрузки

Question

Я использую Angular 6.

У меня есть простые input type="file", которые передают данные в img scr, которые показывают мне изображение, которое мне нужно загрузить.

Когда я выбираю изображение в первый раз, ничего не происходити когда я выбираю изображение во второй раз, я вижу изображение предварительного просмотра.

Чего мне не хватает, почему я не вижу предварительный просмотр изображения в первый раз?

Мой HTML

<div class="container" class="border">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h3>Choose File</h3>
            <form (ngSubmit)="onSubmit()">
                <span style="color:red;" *ngIf="message">{{message}}</span>
                <input #file type="file"  ngf-max-size='10' accept='image/*' name="image" (change)="preview(file)">
                <img [src]="imgURL" height="200" width="200" *ngIf="imgURL">
                <div class="form-group">
                    <button class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

Мой TypeScript

export class BottomSheetComponent implements OnInit {

  token = this.pzLogin.userLoginAccessToken;
  public imagePath;
  imgURL: any = this.pzLogin.UserLoginClaims.ImageUrl;
  public message: string;
  fileData = new FileReader();

  constructor(
    private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>,
     private http: HttpClient, private pzLogin: PrivateZoneLoginService,
     private localStorageService: LocalStorageService) { }

 /* openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }*/

  ngOnInit() {

  }

  preview(event) {

    if (event.files.length === 0) {
      return;
    }

    const mimeType = event.files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = 'Only images are supported.';
      return;
    }

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
      this.message = 'Maximum upload file size 200 kb.';
      return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    reader.onload = () => {
    this.imgURL =  reader.result;
    this.fileData = event.files;
    };
  }

  onSubmit() {
    const formData = new FormData();
   formData.append('UploadedFile', this.fileData[0], this.fileData[0].name);
   formData.append('token', this.token);
    this.http.post('http://localhost:11111/PrivateZone/UploadUserImage', formData)
      .subscribe(res => {
        console.log('res' + res);
        this.localStorageService.setItem('UserLoginClaims', res);
      });
  }
}

Answer 1

Попробуйте вот так

Предварительный просмотр (событие) {

if (event.files.length === 0) {
  return;
}

const mimeType = event.files[0].type;
if (mimeType.match(/image\/*/) == null) {
  this.message = 'Only images are supported.';
  return;
}

const fileSize = event.files[0].size;
if (fileSize > 200839) {
  this.message = 'Maximum upload file size 200 kb.';
  return ;
}

const reader  = new FileReader();
reader.readAsDataURL(event.files[0]);

const _self = this;
reader.onload = () => {
_self.imgURL =  reader.result;
_self.fileData = event.files;
};

}

Answer 2

У меня есть это изображение для загрузки в компонент Bottom Sheet, и это было проблемой.

Вам просто нужно добавить this._bottomSheetRef.containerInstance.enter();

Это загрузит изображение

Вот изменение, которое я сделал:

  this.reader.onload = () => {
      this.imgURL = this.reader.result;
       this.fileData = event.files;
       this._bottomSheetRef.containerInstance.enter();
    };

Answer 3

вы можете попробовать вот так

 preview(event) {

    if (event.files.length === 0) {
      return;
    }

    const mimeType = event.files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = 'Only images are supported.';
      return;
    }

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
      this.message = 'Maximum upload file size 200 kb.';
      return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    const self = this; // here we gave reference of this to self 
    reader.onload = () => {
    self.imgURL =  reader.result;
    self.fileData = event.files;
    };
  }

дайте мне знать, работает он или нет.