如何解决：TypeError：无法将undefined或null转换为对象

我正在创建一个angular2项目，并且我正在使用ng2-uploader作为文件上传的插件。我想抓住一个div，并在同一时间我想要在div内的上传按钮。选择一个文件上传后，我得到的错误为 TypeError：无法将undefined或null转换为对象。如何解决：TypeError：无法将undefined或null转换为对象

HTML代码：

<div [hidden]="!onUpload" ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)"> 
    <input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)"> 
    <p><span>Response: {{ uploadFile | json }}</span></p> 
</div>

组件是：

import { Component, OnInit, NgModule, NgZone } from '@angular/core'; 

@Component({ 
    selector: 'app-fileselect', 
    templateUrl: './fileselect.component.html', 
    styleUrls: ['./fileselect.component.css'] 
}) 

export class FileSelectComponent implements OnInit { 
    zone: NgZone; 
    hasBaseDropZoneOver: boolean = false; 
    basicProgress: number = 0; 
    uploadFile: any; 

constructor() { 
    this.zone = new NgZone({ enableLongStackTrace: false });//file upload  
    } 

options: Object = { 
    url: 'http://localhost:4200/assets/documents' 
    }; 

handleUpload(data): void { 
    if (data && data.response) { 
     data = JSON.parse(data.response); 
     this.uploadFile = data; 
     this.zone.run(() => { 
     this.basicProgress = data.progress.percent; 
     }); 
    } 
    } 

fileOverBase(e: any): void { 
     this.hasBaseDropZoneOver = e; 
     } 
    }

来源

2016-09-28 sainu

我也面对这个问题，让我知道html的完整结构，主要是这个上传按钮的外部div。 –

当然我会更新我的问题 – sainu

响应：{{uploadFile | json}}

由于这种结构，当你使用输入文件上传项目时，它会自动触发父div（'ngFileDrop'）。所以它会调用空数据的函数。这个过程会造成错误。

所以你可以做一件事，只需将输入按钮放在父div的旁边并尝试。它肯定会起作用。

<div [hidden]="!onUpload" ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)">  
     <p><span>Response: {{ uploadFile | json }}</span></p> 
    </div> 
    <input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">

现在你可以使用一些css来定位div内的输入按钮。

只需检查一下。

来源

2016-10-05 10:04:46

谢谢@aswin – sainu

在HTML代码中你错过了一个"之后选择：

你写道：

<input type="file" ngFileSelect [options]="options (onUpload)="handleUpload($event)">

你应该写：

<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">

来源

2016-09-28 10:43:51 StephaneM

对不起@StephaneM。这是我的错误。其实在我的程序里'''有。 – sainu

如何解决：TypeError：无法将undefined或null转换为对象

回答

相关问题