如何在 Angular 5+ 中使用 ngx-file-drop 验证文件？答案

【问题标题】：how to validate file using ngx-file-drop in angular 5+?如何在 Angular 5+ 中使用 ngx-file-drop 验证文件？
【发布时间】：2026-02-07 10:05:02
【问题描述】：

我在 Angular 6 上使用“ngx-file-drop”。

<file-drop headertext="Drop files here" (onFileDrop)="dropped($event)" 
             (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" multiple>
                 <span>optional content (don't set headertext then)</span>
             </file-drop>

组件文件是

public dropped(event: UploadEvent) {
    this.files = event.files;
    for (const droppedFile of event.files) {

      // Is it a file?
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file((file: File) => {

          // Here you can access the real file
          // console.log("dropfile_file"+ droppedFile.relativePath, file);

          this.drop_files.push(file);
          console.log(this.drop_files);



        });
      } else {
        // It was a directory (empty directories are added, otherwise only files)
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
        console.log("file_entry"+ droppedFile.relativePath, fileEntry);
      }
    }
  }

  public fileOver(event){
    console.log("file_over"+event);
  }

  public fileLeave(event){
    console.log("file_leave"+event);
  }

我不知道如何验证文件以使用 ngx-file-drop。

ngx-file-drop 中是否有任何方法来验证文件？请帮忙。

谢谢，

【问题讨论】：

我也在使用这个库来尝试做类似的事情。我在文档中看到有一个输入参数“accept”，它一直传递到底层的标记，但我没有看到这对拖放功能有任何作用。我在文档中有参数集 accept="png" ，我仍然可以拖放任何文件。这是这个库的预期功能吗？我想知道是否有一个开箱即用的解决方案和一种方法来避免文件扩展名解析丢弃答案，如下所述。

标签： angular npm file-upload angular6 ng-file-upload

【解决方案1】：

我让它像这样工作：

public dropped(event: UploadEvent) {
    if (event.files.length > 1) {
        alert("impossible de rajouter plus d'un document à la fois");
    } else {
        this.verifierEnvoyerDocument(event.files[0]);
    }
}

verifierEnvoyerDocument(droppedFile: UploadFile) {
    this.file = droppedFile;
    // Is it a file and is it allowed?
    if (droppedFile.fileEntry.isFile && this.isFileAllowed(droppedFile.fileEntry.name)) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file((file: File) => {
            console.log('isFile :', file.name);
            console.log(droppedFile.relativePath, file);
            this.envoyerDocument(droppedFile.relativePath, file);
        });
    } else {
        alert("Seul les fichiers au format '.doc', '.docx', '.ppt', '.pptx', '.pdf' sont accepté.");
    }
}

isFileAllowed(fileName: string) {
    let isFileAllowed = false;
    const allowedFiles = ['.doc', '.docx', '.ppt', '.pptx', '.pdf'];
    const regex = /(?:\.([^.]+))?$/;
    const extension = regex.exec(fileName);
    if (isDevMode()) {
        console.log('extension du fichier : ', extension);
    }
    if (undefined !== extension && null !== extension) {
        for (const ext of allowedFiles) {
            if (ext === extension[0]) {
                isFileAllowed = true;
            }
        }
    }
    return isFileAllowed;
}

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

import { UploadEvent, UploadFile, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';




public dropped(event: UploadEvent) {
    let droppedFile = event.files[0];
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file((file: File) => {
          this.file = file;
        });
    }
  }

在多个循环 event.files 中

【讨论】：