时间戳

首页 > 解决方案 > 如何在 Angular 6 中上传之前验证文件

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

问题描述

validate在以 Angular 4 及更高版本上传之前如何归档？
我想要Angular 4file type及file size更高版本的验证。
我的问题截图

对于每个文件，我都得到正确的文件大小和类型，除了.msg文件。如何 为Outlook文件获取文件类型为application/vnd.ms-outlook application/octet-stream。请帮帮我。

标签： validationfile-uploadangular6mime-types

解决方案

你的问题有点（很多）模糊。我假设您的意思是，如何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类型，您可以定义一个接口来给您类型提示。

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不推荐类型。

推荐阅读