角度拖放，事件中的空文件数组

Posted 2023-05-08

【中文标题】角度拖放，事件中的空文件数组

【英文标题】：Angular Drag and Drop, Empty files array in Event

【发布时间】：2021-11-08 21:51:19

【问题描述】：

我在另一个具有最新 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');
      

【问题讨论】：

代码看起来不错。当你 console.log(evt) 时你会得到什么

空的 DataTransfer 文件区域，在将文件放入区域后。我发现它是这里描述的错误：github.com/danialfarid/ng-file-upload/issues/314

我过去为单次拖放创建了类似的指令，效果很好。让我看看我明天会更新你。

【参考方案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);
      

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