Angular 2 -验证一个文件是否真的是一个图像

Angular 2 - Validate if a file is really an image

本文关键字：一个 真的 图像 是否 文件 Angular 验证      更新时间：2023-09-26

在Angular 2中如何验证一个文件是否真的是一个图像?

isImage(file: File): boolean {
    return /^image'//.test(file.type);
}

在上传后的上述函数中，只需将.txt更改为.png文件扩展名，它将返回true例如:text.txt为text.png

HTML <input>有一个可以使用的属性

<input accept=".png, .text" />

您可以通过文件类型轻松检查。例如，它的视频类型将是"video/format"如果是图像，则是&;image/format&;你可以用这个

event.target.files [0] .type.includes('图像')

下面不是关于Angular的，但它确实回答了在javascript中进行客户端文件类型验证的问题。根据您的需求调整解决方案应该很容易:如何在上传之前使用javascript检查文件MIME类型?

这是一个自定义指令。您也可以将其用于其他文件类型。只需添加/删除所需的扩展在RegExp 

import { FormControl, NG_VALIDATORS, Validator } from '@angular/forms';
import { Directive } from '@angular/core';
@Directive({
  selector: '[FileTypeValidator]',
  providers: [
    {
      provide: NG_VALIDATORS, useExisting: FileTypeValidator, multi: true
    }
  ]
})
export class FileTypeValidator implements Validator {
  static validate(c: FormControl): { [key: string]: any } {
    if (c.value) {
      if (c.value[0]) {
        return FileTypeValidator.checkExtension(c);
      };
    }
  }
  private static checkExtension(c: FormControl) {
    let valToLower = c.value[0].name.toLowerCase();
    let regex = new RegExp("(.*?)'.(jpg|png|jpeg)$"); //add or remove required extensions here
    let regexTest = regex.test(valToLower);
    return !regexTest ? { "notSupportedFileType": true } : null;
  }
  validate(c: FormControl): { [key: string]: any } {
    return FileTypeValidator.validate(c);
  }
}

在你的组件中，

this.form = new FormGroup({
        file: new FormControl("",    [FileTypeValidator.validate])
    });
相关文章：