Блог

Я использую тег img в своем шаблоне для немедленного отображения выбранных изображений, но выбор изображений большего размера (~ 5 МБ) выдает ошибку RangeError: Maximum call stack size exceeded .

шаблон:

 <img [src]="picture[profilePictureType]" *ngIf="picture[profilePictureType]" />
<input type="file" #profileInput accept="image/*" (change)="pictureSelected($event, profilePictureType)" />
 

ts:

 picture: any[] = [];
profilePictureType = PictureType.Profile;

pictureSelected(event: any, pictureType: PictureType) {
  const pictureTypeStr = (PictureType[pictureType]   'Picture').replace(/./, c => c.toLowerCase());
  if (event.target.files amp;amp; event.target.files[0]) {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      this.picture[pictureType] = e.target.result; // this is throwing the error
      this.userForm.controls.extendedData.get(pictureTypeStr).setValue(e.target.result);
      this.userForm.controls.extendedData.get(pictureTypeStr).markAsTouched();
      this.userForm.controls[pictureTypeStr   'Changed'].setValue(true);
    };

    reader.readAsDataURL(event.target.files[0]);
  }
}
 

Чего мне здесь не хватает? Я пытался использовать var profilePicture: any; вместо массива, но это не помогло. Однако нет проблем, если я закомментирую тег img, поэтому я полагаю, что это вызвано циклами обнаружения угловых изменений, но я не знаю как. Раньше я пытался использовать асинхронный канал для загрузки изображений с сервера, и это заканчивалось тем, что сервер запрашивал сервер много раз в секунду. (Я хотел только один раз.)

Трассировка ошибки в стеке:

 at String.match (<anonymous>)
at _sanitizeUrl (core.js:4872)
at ɵɵsanitizeUrl (core.js:5237)
at elementPropertyInternal (core.js:7913)
at Module.ɵɵproperty (core.js:14774)
at UserDataComponent_ng_template_3_img_36_Template (userdata.component.html:52)
at executeTemplate (core.js:7511)
at refreshView (core.js:7380)
at refreshEmbeddedViews (core.js:8481)
at refreshView (core.js:7404)
 

судя по этой трассировке стека, angular пытается очистить указанный вами URL-адрес, но это мешает внутренним методам, используемым angular, пытаясь использовать bypassSecurityTrustUrl() следующим образом:

this.picture[pictureType] = this.sanitizer.bypassSecurityTrustUrl(e.target.result);