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

Posted 2023-03-14

【中文标题】如何在 Angular 6 中上传之前验证文件

【英文标题】：how to validate files before uploading in angular 6

【发布时间】：2019-01-19 13:50:22

【问题描述】：

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

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

【问题讨论】：

这不是提问的方式。请阅读：***.com/help/how-to-ask 你没有给出关于你在做什么的上下文。你做了什么。

【参考方案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 类型。

【讨论】：

如何查看 .msg 文件（outlook）文件类型？检查时，我得到空字符串。

假设您已正确读取文件，您应该检查 file.type 的类型为 application/vnd.ms-outlook.... 否则，请检查文件名上的扩展名... 例如 @987654334 @