Блог

Главная - Вопросы по программированию - ошибка Не удается прочитать свойство «файлы» неопределенного значения при нажатии кнопки загрузить файл

ошибка Не удается прочитать свойство «файлы» неопределенного значения при нажатии кнопки загрузить файл

#javascript #typescript #angular7 #angular-components

Вопрос:

Я работаю над проектом angular 7

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

затем он показывает, что ошибка не может прочитать свойство «файлы» неопределенного

как показано ниже

 DeliverySystemComponent.html:25 ERROR TypeError: Cannot read property 'files' of undefined

и это на самом деле моя проблема

итак, как решить эту проблему

то, что я пытаюсь, это

html-компонент доставки

 <app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
      nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>

<button (click)="uploadFile(files)" class="btn btn-link" style="margin-right: 0px">
          <i nbTooltip="Import Template" nbTooltipPlacement="bottom" nbTooltipStatus="primary">
            <nb-icon icon="cloud-upload-outline"></nb-icon>
          </i>
        </button>

сценарий типа компонента доставки

 fileToUpload: File = null;
handleFileInput(files: FileList) {
  if (files.length == 0) {
      return;
    }  
 
  this.fileToUpload = files.item(0);
 
} 
public uploadFile = (files) => {
   
  const formData = new FormData();
  
  formData.append('file', this.fileToUpload,this.fileToUpload.name);
 }

ошибка загрузки файла

при использовании

 <input type="file"  
             id="file"  
             (change)="handleFileInput($event.target.files)">

вместо

   <app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
          nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>

это работает, так в чем же проблема и как ее решить

Комментарии:

1. может ли кто-нибудь помочь мне, если что-то не ясно, я могу объяснить

2. Основываясь на коде и HTML, которые вы показываете , единственное место, где это может быть, находится (complete)="handleFileInput($event.target.files)" в HTML и $event.target не определено (ключ к ошибке в том, что есть попытка получить .files от чего-то, что есть undefined , поэтому ищите .files , где это происходит).

3. спасибо за ответ, так что я делаю, чтобы решить проблему

4. когда используйте это файлы)»> альтернатива использования > файлы)»>></app-custom-upload> это работает, когда используется первое утверждение, так что я делаю и почему возникает эта проблема и как ее решить

5. смотрите обновленное сообщение

Метки: