如何在Angular 5中实现文件上传时的文件控件验证？

看你已经搭好了文件上传的表单结构和错误提示模板，应该是在自定义验证器的落地环节遇到问题了吧？我给你一套完整的可运行方案，帮你搞定这个文件大小验证：

1. 编写自定义文件大小验证器 #

首先实现一个能校验文件大小的验证器类，确保它能正确读取文件的字节数并和5MB阈值对比：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class FileValidators {
  // 接收最大允许大小（MB），返回验证器函数
  static maxSize(maxSizeInMB: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      // 只有当控件有值（选中了文件）时才校验
      if (control.value) {
        const file = control.value as File;
        const maxAllowedBytes = maxSizeInMB * 1024 * 1024;
        // 如果文件大小超过阈值，返回错误标识
        if (file.size > maxAllowedBytes) {
          return { invalid: true };
        }
      }
      // 校验通过返回null
      return null;
    };
  }
}

2. 在表单组中绑定验证器 #

在组件的FormGroup初始化代码里，把这个验证器绑定到fileInput控件上：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FileValidators } from './file-validators';

@Component({
  // 组件元数据（根据你的实际情况填写）
})
export class YourComponent implements OnInit {
  angForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.angForm = this.fb.group({
      // 其他表单控件配置
      fileInput: ['', [FileValidators.maxSize(5)]]
    });
  }
}

3. 修正模板的错误判断逻辑 #

你原来的模板里有个小疏漏：sizeinvalid这个状态不存在，应该用控件的invalid状态，同时建议用angForm.get('fileInput')来获取控件，代码更简洁：

<input type="file" class="form-control-file" formControlName="fileInput" fileInput >
<div *ngIf="angForm.get('fileInput').invalid && (angForm.get('fileInput').dirty || angForm.get('fileInput').touched)" 
     class="alert alert-danger">
  <div *ngIf="angForm.get('fileInput').errors.invalid">Maximum allowed image Size is 5 MB</div>
</div>

注意：如果你用的fileInput是自定义指令，一定要确保它能把选中的File对象正确赋值给表单控件的value属性，否则验证器拿不到文件信息，就不会触发校验。

扩展优化（可选） #

• 如果需要支持多文件上传，把验证器里的control.value改成FileList，遍历每个文件进行大小校验。
• 可以在验证器里添加文件类型校验，比如只允许image/jpeg、image/png等格式。

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