angular 7中的文件验证

如何在上传到服务器之前验证文件大小和文件类型等文件。

---

以及如何将这种验证与反应式表单或模板驱动的方法结合使用。

这个问题几乎可以通过HTML本身解决。不需要角度相关的东西

 <form action="/action_page.php">
     <input type="file" name="pic" accept="image/*">
     <input type="submit">
 </form> 

accept属性可按如下方式使用：

<input accept="file_extension|audio/*|video/*|image/*|media_type"> 

accept参数解释如下：

<input accept="file_extension|audio/*|video/*|image/*|media_type"> 

• 文件扩展名指定用户可以从中选择的文件扩展名（例如：.gif、.jpg、.png、.doc）
• audio/*用户可以选择所有声音文件
• video/*用户可以选择所有视频文件
• image/*用户可以选择所有图像文件
• 媒体类型有效的媒体类型，不带参数。查看标准媒体类型的完整列表

---

希望这有帮助：）

您可以获取更改事件并检查文件大小和类型

在ts文件中，请使用此方法

readFile(fileEvent: HTMLInputEvent) {
   const file: File = fileEvent.target.files[0];
   console.log('size', file.size);
   console.log('type', file.type);
}

在html句柄onchange事件中

<input (change)="readFile($event)" type="file" />

---

默认情况下，被动或模板驱动的表单不支持文件，因此您需要创建一个自定义的ControlValueAccessor，用于包装文件变量。这正是我们要做的

以下是相关部分：

@Component({
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: FileUploadComponent,
      multi: true
    }
  ]
})
export class FileUploadComponent implements ControlValueAccessor {
  @Input() progress;
  onChange: Function;
  private file: File | null = null;

  @HostListener('change', ['$event.target.files']) emitFiles( event: FileList ) {
    const file = event && event.item(0);
    this.onChange(file);
    this.file = file;
  }

  constructor( private host: ElementRef<HTMLInputElement> ) {
  }

  writeValue( value: null ) {
    // clear file input
    this.host.nativeElement.value = '';
    this.file = null;
  }

  registerOnChange( fn: Function ) {
    this.onChange = fn;
  }

  registerOnTouched( fn: Function ) {
  }

}

@组件({
供应商：[
{
提供：NG_值访问器，
useExisting:FileUploadComponent，
多：真的
}
]
})
导出类FileUploadComponent实现ControlValueAccessor{
@输入（）进度；
onChange：功能；
私有文件：文件| null=null；
@HostListener（'change'，['$event.target.files']）发送文件（事件：文件列表）{
const file=event&&event.item（0）；
此.onChange（文件）；
this.file=文件；
}
构造函数（专用主机：ElementRef）{
}
writeValue（值：null）{
//清除文件输入
this.host.nativeElement.value=''；
this.file=null；
}
寄存器更改（fn：功能）{
this.onChange=fn；
}
寄存器（fn：功能）{
}
}

---

如果您需要任何验证，那么您可以在这个定制组件中实现它。只需通过注入来获取NgControl的引用，并相应地调用setErrors。

我不确定我的答案是否仍然相关。但经过一番挖掘和胡闹之后，我想出了这个解决方案（取自我自己的项目）。 请记住，我正在使用多个文件上传

HTML:

<input type="file" multiple (change)="onFilePicked($event.target.files)" />

组成部分： 假设您正在使用并已创建formbuilder

this.formBuilder= this.fb.group({
  files: ['', [checkFileType]],
  //other fields
 })

 //custom validation
function checkFileType(control: AbstractControl): { [key: string]: any } | null {
    const files: File[] = control.value;
    let errors: string[] = [];

   if (files.length >= 1 ) {
       for (let index = 0; index < files.length; index++) {
           //Use a type list here to check for your types for example "image/jpeg"
           if (files[index].type === '') {                 
               errors.push(`${files[index].name} has an invalid type of unknown\n`);
           }
       }

       return  errors.length >= 1 ? { invalid_type: errors } : null;           
   }
   return null;  // no file, can be capture by "Required" validation 
}

this.formBuilder=this.fb.group({
文件：[''，[checkFileType]]，
//其他领域
})
//自定义验证
函数checkFileType（控件：AbstractControl）：{[key:string]：any}空{
常量文件：文件[]=control.value；
let错误：字符串[]=[]；
如果（files.length>=1）{
for（让index=0；index=1？{invalid_type:errors}:null；
}
返回null；//没有文件，可以通过“必需”验证捕获
}

要捕获HTML中的错误，请执行以下操作：

<div *ngIf="files.errors">
    <div class="text-danger" *ngFor="let typeError of files.errors.invalid_type">
        <span>- {{ typeError }}.</span>
    </div>
</div>

-{{typeError}}。

这个解决方案为我做到了。我希望它也能帮助你

---

示例输出（来自比利时的问候语：D）

您的问题太宽泛了。看一看：OP明确表示他想使用反应式或模板驱动的方法，答案就足够了。