Angular 11 中如何使用 ClamAV 实现文件上传病毒扫描

核心前提说明 #

ClamAV 是原生的服务端杀毒引擎，无法直接在 Angular 运行的浏览器环境中安装运行。你需要将文件上传到后端服务，由后端调用 ClamAV 完成病毒扫描后，再将扫描结果返回给前端展示。

完整实现流程 #

• 第一步：服务端部署 ClamAV 并提供扫描接口
  在你的后端服务器安装 ClamAV 服务，开启 clamd 守护进程，对外提供接收文件、触发扫描、返回扫描结果的 HTTP 接口。主流后端语言都有对应的 ClamAV 客户端 SDK 可以直接调用。
• 第二步：Angular 前端适配改造
  你可以参考以下代码修改你的文件上传组件：
  组件逻辑代码：

  import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-file-upload',
    templateUrl: './file-upload.component.html'
  })
  export class FileUploadComponent {
    scanResult: string = '';
    isScanning: boolean = false;
  
    constructor(private http: HttpClient) {}
  
    onFileSelected(event: Event) {
      const input = event.target as HTMLInputElement;
      if (!input.files?.length) return;
      const file = input.files[0];
      this.uploadAndScan(file);
    }
  
    uploadAndScan(file: File) {
      this.isScanning = true;
      this.scanResult = '';
      const formData = new FormData();
      formData.append('uploadFile', file);
  
      this.http.post<{code: number, msg: string, safe: boolean}>('/api/scan-file', formData).subscribe({
        next: (res) => {
          if (res.safe) {
            this.scanResult = '*文件安全，扫描通过*';
            // 后续文件存储、业务处理等逻辑
          } else {
            this.scanResult = '*文件检测到病毒，已拦截*';
          }
        },
        error: () => {
          this.scanResult = '扫描服务异常，请稍后重试';
        },
        complete: () => {
          this.isScanning = false;
        }
      })
    }
  }
  

  组件模板代码：

  <div class="upload-container">
    <input type="file" (change)="onFileSelected($event)" [disabled]="isScanning">
    <p *ngIf="isScanning">正在扫描文件中，请稍候...</p>
    <p *ngIf="scanResult" [ngClass]="{'safe': scanResult.includes('安全'), 'danger': scanResult.includes('病毒')}">{{ scanResult }}</p>
  </div>
  

• 第三步：安全注意事项
  • 必须在服务端完成扫描逻辑，禁止依赖前端判断文件安全性，避免前端校验被绕过
  • 大文件可以提前在前端做大小校验，减少不必要的上传开销
  • ClamAV 病毒库需要定期更新，保证新病毒的检测能力

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