validation - 如何在 Angular 6 中上传之前验证文件

Question

我怎么能validate上传 Angular 4 及更高版本之前的文件？
我要 file type和 file size角度 4 及以上的验证。
Screenshot of my issue

对于每个文件，我都得到了正确的文件大小和类型，除了 .msg 文件。怎么获得
文件类型为 应用程序/vnd.ms-outlook
应用程序/八位字节流
对于 展望文件。请帮帮我。

Answer 1

你的问题有点(很多)模糊。我假设您的意思是，您如何获得 File来自 Angular 中的输入的对象。死的简单。与 vanilla(ish) JS 一样。

在您的组件中，创建一个函数来读取您的文件:

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

并将其应用于 (change)您在模板中输入的事件:

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

之后你可以对文件做任何你喜欢的事情。根据您的问题，示例函数仅获取大小和类型。

Stackblitz 示例: https://stackblitz.com/edit/angular-vpvotz

顺便说一句，而不是使用 any作为 fileEvent type，你可以定义一个接口(interface)给你类型提示。

interface HTMLInputEvent extends Event {
    target: HTMLInputElement & EventTarget;
}

当您使用它时，还可以添加 File也输入。所以你的功能变成:

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

但是，你不必。虽然 any不推荐类型。