NG2 파일 업로드 + I 파일 드래그에 업로드를 달성하고 싶다 2

Question

각도와 파일 객체 얻을 방법 : 나는 다음과 같은 코드로 NG2 파일 업로드 버전 1.2.1을 사용하고 을 :

응용 프로그램을. module.ts :

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

component.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로 인쇄 된 드래그에서 성공적으로 호출됩니다. 이제 드래그 된 파일의 객체를 어떻게 얻을 수 있습니까 ??

Answer 1

ng2 파일 업로드 플러그인에서 파일 객체를 가져 오려면 afterAddingfile 메서드를 사용해야합니다.

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

Answer 2

나는 그 말 대답을 알고 있지만 그것은 다른 사람

변경 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> 

코드 **로 변경 component.ts을 아래로 ** 코드

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

**public onFileDrop(fileList: File[]) { 
    console.log(fileList);// u get file as fileList[0] 
}** 
}