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

【问题标题】：How to Resolve: TypeError: Cannot convert undefined or null to object如何解决：TypeError：无法将 undefined 或 null 转换为对象
【发布时间】：2020-05-20 18:38:07
【问题描述】：

我正在创建一个 angular2 项目，并使用 ng2-uploader 作为文件上传插件。我想在 div 上拖放，同时我想在 div 中添加一个上传按钮。选择要上传的文件后，我收到错误消息 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;
      }
    }

【问题讨论】：

我也遇到了这个问题，请告诉我html的完整结构，主要是这个上传按钮的外层div。
我当然会更新我的问题

标签： angular typescript

【解决方案1】：

响应：{{ 上传文件 | 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 内。

看看就好。

【讨论】：

【解决方案2】：

在您的 html 代码中，您在选项后缺少 "：

你写道：

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

你应该写：

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

【讨论】：

对不起@StephaneM。是我的错。其实在我的程序里`"`是有的。