Angular13如何仅允许PDF文件上传（含拖拽），不使用第三方工具

先修正指令中的无效代码，再添加PDF文件格式校验逻辑，完整实现如下：

修正后的拖拽指令代码 #

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appDragDrop]'
})
export class DragDirective {
  @Output() onFileDropped = new EventEmitter<File[]>();
  @Output() onInvalidFile = new EventEmitter<string>(); // 可选：用于提示非法文件

  // Dragover 事件监听
  @HostListener('dragover', ['$event']) onDragOver(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  // Dragleave 事件监听
  @HostListener('dragleave', ['$event']) public onDragLeave(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  // Drop 事件监听（核心校验逻辑）
  @HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();
    
    if (!evt.dataTransfer?.files) return;
    
    // 将FileList转为数组方便过滤
    const files = Array.from(evt.dataTransfer.files);
    // 双重校验确保是PDF文件
    const validPdfFiles = files.filter(file => {
      return file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf');
    });
    
    // 仅传递合法的PDF文件
    if (validPdfFiles.length > 0) {
      this.onFileDropped.emit(validPdfFiles);
    }
    
    // 可选：提示用户存在非法文件
    const invalidCount = files.length - validPdfFiles.length;
    if (invalidCount > 0) {
      this.onInvalidFile.emit(`共${invalidCount}个文件格式错误，仅支持PDF格式`);
    }
  }
}

关键改动说明 #

• 修复了onDragOver方法中的无效代码，保留正确的事件阻止逻辑
• 统一使用DragEvent类型替代any，提升代码类型安全性
• 通过MIME类型校验+文件名后缀校验双重方式确保仅接受PDF文件，兼容部分系统MIME类型识别异常的情况
• 新增可选的onInvalidFile输出事件，用于向用户反馈非法文件信息

HTML使用示例 #

<div appDragDrop 
     (onFileDropped)="handlePdfUpload($event)" 
     (onInvalidFile)="showUploadError($event)">
  拖拽PDF文件到此处上传
</div>

组件中处理事件 #

handlePdfUpload(validFiles: File[]) {
  // 此处编写合法PDF文件的上传逻辑
}

showUploadError(errorMsg: string) {
  // 提示用户错误信息，例如使用弹窗或Toast
  alert(errorMsg);
}

内容的提问来源于stack exchange，提问作者Bhrungarajni