Javascript 如何修复拖放和文件浏览指令

HTML

dnd.directive.ts

@HostBinding（'class.fileover'）fileover:boolean；
@Output（）filedrop=新的EventEmitter

当我尝试选择一个文件时，输出如下：
我要做的，应该和第一张照片相似

  <div style="padding: 2rem;" appDnd (files)="onFileDropped($event)" *ngIf="dragField">
        <input type="file" #fileDropRef id="fileDropRef" (change)="fileBrowseHandler($event.target.files)" />

files: FileHandle[] = [];

onFileDropped(file: FileHandle[]): void {
    console.log(file)
  }

fileBrowseHandler(file: FileHandle[]): void {

    console.log(file)
  }

  @HostBinding('class.fileover') fileOver: boolean;
  @Output() fileDropped = new EventEmitter<any>();
  @Output() files: EventEmitter<FileHandle[]> = new EventEmitter();

  constructor(private sanitizer: DomSanitizer) { }

  // Dragover listener
  @HostListener('dragover', ['$event']) onDragOver(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
    // this.fileOver = true;
  }

  // Dragleave listener
  @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
    // this.fileOver = false;
  }

  // Drop listener
  @HostListener('drop', ['$event']) public ondrop(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
    this.fileOver = false;
    const file = evt.dataTransfer.files;

    const files: FileHandle[] = [];
    for (let i = 0; i < evt.dataTransfer.files.length; i++) {
      const filed = evt.dataTransfer.files[i];
      const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(filed));
      files.push({ file, url });
    }
    if (files.length > 0) {
      this.files.emit(files);
      this.fileDropped.emit(file);
    }
  }