Angular 事件中的拖放、清空文件数组

Question

我在另一个项目中使用我的指令上传最新的 Angular，但它似乎没有在 dataTransfer 中传递文件数组，因为当我查看事件（来自侦听器）时，文件数组是空的。请帮助。

export class FileUploadDirective {
  @Input() multiple: boolean;
  @Input() accept: string[];
  @Input() maxFileSize: number;

  @Output() fileEmitter = new EventEmitter<Object>();
  constructor(
    private renderer: Renderer2,
    private elementRef: ElementRef,
    ) {
    this.multiple = false;
    this.accept = ['application/pdf'];
    this.maxFileSize = 1;
    this.renderer.setProperty(this.elementRef.nativeElement, 'draggable', true);
  }

  @HostListener('dragover', ['$event']) onDragOver(evt: DragEvent){
    evt.preventDefault();
    evt.stopPropagation();
  }

  @HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();

    console.log("event: ", evt);
    files = evt.dataTransfer?.files;
    
    if (files && files.length > 0) {
      let reader: FileReader = new FileReader();
      
      reader.readAsDataURL(files[0]);
      reader.onloadstart = (e) => {
        console.log('load start', this.multiple, this.accept, this.maxFileSize);
      }

      reader.onprogress = (e) => {
        console.log('load progress');
      }

Answer 1

如有此错误，请勿赋值files = evt.dataTransfer?.files;

必须由以下人员完成：

 console.log("event: ", evt.dataTransfer?.files.length);
    // files = evt.dataTransfer?.files;

    if (evt.dataTransfer!.files.length > 0) {
      let reader: FileReader = new FileReader();

      reader.readAsDataURL(evt.dataTransfer!.files[0]);
      reader.onloadstart = (e) => {
        console.log('load start', this.multiple, this.accept, this.maxFileSize);
      }

文件长度正确，但编译器将第一个赋值错误。以上针对单个文件的解决方案。

Angular 事件中的拖放、清空文件数组

Angular Drag and Drop, Empty files array in Event

drag-and-drop

typescript

angular