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

Posted 2023-03-13

【中文标题】按下上传按钮时出现错误属性名称？

【英文标题】：I get error property name when press upload Button?

【发布时间】：2021-03-05 18:54:40

【问题描述】：

我在 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>  

组件.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);  
          
      );  
    

请问如何解决这个错误？

【问题讨论】：

当你在console.log(fileToUpload)里面uploadFile()函数时你会得到什么

【参考方案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> 

【讨论】：

谢谢回复 我需要从选择文件选择的路径中获取文件

我需要按下按钮上传时通过选择文件选择文件。上面的解决方案让我重复相同的操作两次，这意味着我将选择文件两次，我不需要那个

【参考方案2】：

相信你还没有得到'#file'的值。这就是你得到'fileToUpload' undefined 的原因，当然还有这个

“错误类型错误：无法读取未定义的属性‘名称’”

试试这个：

首先，声明一个@viewchild：

@viewchild('file') uploadFile: ElementRef;

然后使用nativeElement（类似于HTML DOM中的document.getElementById）从<input>获取文件：

让文件 = this.uploadFile.nativeElement.value;

编辑：

声明viewchild：

@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);  
          
      );  
  

【讨论】：

它给了我重复的标识符 Uploadfile

也是我分配的地方 let file = this.uploadFile.nativeElement.value;

还有在 html 上必须声明的内容

能否给我详细的component.html和component.ts

@ahmedbarbary 所以将 'uploadFile' 标识符更改为您未使用的内容以及您已经在 HTML 中声明 #file 的 HTML，因此您无需修复它