错误类型错误：无法读取未定义的属性“文件”

Question

我正在使用两个 Angular(2+) 工具：ng2-file-upload 和 angular2-img-cropper。

我正在尝试使用 ng2-file-upload 的 Dropzone 在 angular2-img-cropper 的裁剪工具中加载图像。 如果我更改输入文件（HTMLElement），我实际上可以在裁剪工具中加载所选图像，但拖放区域会失败。

这是我如何使用输入来做到这一点：

HTML：

<input type="file" id="file-name" 
                    ng2FileSelect 
                    [uploader]="uploader"
                    (change)="fileChangeListener($event, cropper)"/>

TS：

fileChangeListener($event : any, cropperComp: ImageCropperComponent) {

    this.cropper = cropperComp;

    let image = new Image();
    var file:File = $event.target.files[0];
    var myReader:FileReader = new FileReader();
    var that = this;

    myReader.onloadend = function (loadEvent: any) {
        image.src = loadEvent.target.result;
        that.cropper.setImage(image);
    };
    myReader.readAsDataURL(file);

}

正如我所说，这很有效。

但是，当我尝试使用 Dropzone 时，出现此错误：

错误 TypeError：无法在 ProfileComponent.fileChangeListener 处读取未定义 [...] 的属性“文件”

HTML（拖放区）：

<div ng2FileDrop
                    [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                    (fileOver)="fileOverBase($event)"
                    [uploader]="uploader"
                    class="well my-drop-zone"     
                    (onFileDrop)="fileChangeListener($event, cropper)"
                    >
                    Base drop zone
                </div>

Answer 1

var file:File = $event.target.files[0];

应该是：

var file:File = $event.files[0];