按上传按钮时出现错误属性名称？

Question

我在 angular 7 个项目上工作我遇到问题我在上传数据时收到错误属性名称。

我先选择文件然后点击上传按钮

按下按钮上传后出现以下错误：

core.js:4197 ERROR TypeError: Cannot read property 'name' of undefined  
    at UploadComponent.uploadFile (upload.component.ts:96)  
    at UploadComponent_Template_button_click_5_listener (upload.component.html:6)  
    at executeListenerWithErrorHandling (core.js:14286)  
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14321)  
    at HTMLButtonElement.<anonymous> (platform-browser.js:582)  
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)  
    at Object.onInvokeTask (core.js:27394)  
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)  
    at Zone.runTask (zone-evergreen.js:167)  
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

我在下面的行中收到此错误：

formData.append('file', fileToUpload, fileToUpload.name);

完整的上传代码

component.html

<div class="col-md-3">  
   <input type="file" #file placeholder="Choose file"  multiple>  
     
   <button type="button" class="btn btn-success" (click)="uploadFile(file)">Upload File</button>  
 </div>

component.ts

public uploadFile = (files) => {  
    if (files.length === 0) {  
      return;  
    }  
  
    let fileToUpload = <File>files[0];  
    const formData = new FormData();  
    formData.append('file', fileToUpload, fileToUpload.name);  
      
    this.http.post('https://localhost:44396/api/ApprovalQuality/', formData, {reportProgress: true, observe: 'events'})  
      .subscribe(event => {  
          
        if (event.type === HttpEventType.UploadProgress)  
        {  
         
          this.progress = Math.round(100 * event.loaded / event.total);  
        }  
        else if (event.type === HttpEventType.Response) {  
          this.message = 'Upload success.';  
          this.onUploadFinished.emit(event.body);  
        }  
      });  
  }

所以请问如何解决这个错误？

Answer 1

试试这个..

<div class="col-md-3">  
   <input type="file" #file placeholder="Choose file"  multiple>  
     
   <button type="button" class="btn btn-success" (click)="file.click()">Upload File</button>  
 </div>

Answer 2

我相信你还没有得到'#file'的价值。这就是为什么你 'fileToUpload' 未定义，当然还有这个

"ERROR TypeError: Cannot read property 'name' of undefined"

试试这个：

首先声明一个@viewchild:

@viewchild('file') uploadFile: ElementRef;

然后使用 nativeElement（就像 HTML DOM 中的 document.getElementById）从 <input>:
获取文件
让文件 = this.uploadFile.nativeElement.value;

编辑：

声明子视图：

@ViewChild('file') someFile: ElementRef | undefined;

上传文件函数：

public uploadFile(): void {
    let files = this.someFile.nativeElement.value;  
    if (files || files.length === 0) {  
      return;  
    }  
    let fileToUpload = <File>files[0];  
    const formData = new FormData();  
    formData.append('file', fileToUpload, fileToUpload.name);  
      
    this.http.post('https://localhost:44396/api/ApprovalQuality/', formData, {reportProgress: true, observe: 'events'})  
      .subscribe(event => {  
          
        if (event.type === HttpEventType.UploadProgress)  
        {  
         
          this.progress = Math.round(100 * event.loaded / event.total);  
        }  
        else if (event.type === HttpEventType.Response) {  
          this.message = 'Upload success.';  
          this.onUploadFinished.emit(event.body);  
        }  
      });  
  }

按上传按钮时出现错误属性名称？

I get error property name when press upload Button?

javascript

typescript

angular-directive

angular-components

angular7

按上传按钮时出现错误 属性 名称？

I get error property name when press upload Button?

javascript

typescript

angular-directive

angular-components

angular7

按上传按钮时出现错误属性名称？