如何使用ng2 file upload+angular 2获取文件对象

我想在文件拖动时完成上载： 我正在使用ng2文件上载版本1.2.1，其中包含以下代码段：

app.module.ts：

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
..
imports: [
        FileUploadModule
]

组件1.ts：

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';

...

class AppXYZComponent{
private uploader: FileUploader = new FileUploader({ url: 'blah.com' });

    public hasBaseDropZoneOver:boolean = false;
    //public hasAnotherDropZoneOver:boolean = false;

    public fileOverBase(e:any):void {
        console.log("hasBaseDropZoneOver", e);
        this.hasBaseDropZoneOver = e;
    }
}

app.component.html：

<div class="well" ng2FileDrop [uploader]="uploader" [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
             (fileOver)="fileOverBase($event)"
             >
            Drop CSV here
        </div>

---

拖动时成功调用函数fileOverBase，事件e打印为true。现在，如何获取被拖动文件的对象？？？

您需要使用afterAddingfile方法在ng2文件上载插件中获取文件对象

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
...

class AppXYZComponent{
public uploader: FileUploader;
public hasBaseDropZoneOver:boolean = false;
//public hasAnotherDropZoneOver:boolean = false;

constructor(){
   this.uploader = new FileUploader({ url: 'blah.com' });
   this.uploader.onAfterAddingFile = (fileItem) => {
                fileItem.withCredentials = false;
                console.log(fileItem); // fileItem is the file object
            };
}
 public fileOverBase(e:any):void {
    console.log("hasBaseDropZoneOver", e);
    this.hasBaseDropZoneOver = e;
  }
}

---

您需要使用afterAddingfile方法在ng2文件上传插件中获取文件对象

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
...

class AppXYZComponent{
public uploader: FileUploader;
public hasBaseDropZoneOver:boolean = false;
//public hasAnotherDropZoneOver:boolean = false;

constructor(){
   this.uploader = new FileUploader({ url: 'blah.com' });
   this.uploader.onAfterAddingFile = (fileItem) => {
                fileItem.withCredentials = false;
                console.log(fileItem); // fileItem is the file object
            };
}
 public fileOverBase(e:any):void {
    console.log("hasBaseDropZoneOver", e);
    this.hasBaseDropZoneOver = e;
  }
}

---

我知道它的答复很晚，但我希望它能对其他人有所帮助

更改app.component.html：使用**代码

<div class="well" ng2FileDrop [uploader]="uploader" [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)" **(onFileDrop)="onFileDrop($event)"**
         >
        Drop CSV here
    </div>

---

我知道它的答复很晚，但我希望它能对其他人有所帮助

更改app.component.html：使用**代码

<div class="well" ng2FileDrop [uploader]="uploader" [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)" **(onFileDrop)="onFileDrop($event)"**
         >
        Drop CSV here
    </div>