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

Question

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

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

Answer 1

您的问题有点（很多）模糊。我假设您的意思是，如何从 Angular 的输入中获取 File 对象。死的简单。与 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 类型之外，您还可以定义一个接口来为您提供类型提示。

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 类型。