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时，我收到此错误：

错误类型错误：无法在ProfileComponent.fileChangeListener中读取未定义的属性“文件”

HTML （dropzone）：

<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];

错误TypeError：无法读取未定义

1 个答案: