时间戳

首页 > 解决方案 > 按下按钮上传文件时，错误无法读取未定义的属性“文件”

javascript - 按下按钮上传文件时，错误无法读取未定义的属性“文件”

问题描述

我从事 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>

它工作所以是什么问题以及如何解决它

标签： javascripttypescriptangular7angular-components

解决方案

推荐阅读