Angular 7 - естественная ширина изображения и естественная высота

Question

Я - входной файл, и мне нужно проверить naturalWidth и naturalHeight, чтобы получить правильные значения, однако в первый раз код возвращает правильные значения, а во второй раз значения равны 0. Ниже я расшифрую код.

onFileChange(event: any, type: string) {
   const reader = new FileReader();
   if (event.target.files && event.target.files.length > 0) {
     const file = event.target.files[0];
     const img = new Image();
     img.src = window.URL.createObjectURL(file);

     reader.readAsDataURL(file);
     reader.onload = () => {
       let isValidFile = true;
       const width = img.naturalWidth;
       const height = img.naturalHeight;
       console.log(width);

       window.URL.revokeObjectURL(img.src);
       switch (type) {
         case 'banner': {
           if (width !== 1200 && height !== 800) {
             this.modalService.error('error to update image', 'error to update image');
             isValidFile = false;
           }
           break;
         }
         case 'preview': {
           if (width !== 480 && height !== 480) {
             this.modalService.error('error to update image', 'error to update image');
             isValidFile = false;
           }
           break;
         }
         default: {
           isValidFile = false;
         }
       }

     };
   }
 }

Мои данные:

<input type="file" class="custom-file-input" id="bannerFile" (change)="onFileChange($event, 'banner')">
<input type="file" class="custom-file-input" id="previewFile" (change)="onFileChange($event, 'preview')">

Если у вас есть представление о моей проблеме, пожалуйста, помогите мне.

Answer 1

Это потому, что вы установили событие на any, так как вы имеете дело со свойством DOM, вы должны быть осторожны в файле .ts. Измените event: any на event (без any).

Вот ссылка стекблитов !