angular 6 中上传前如何验证文件

Question

如何在 angular 4 及更高版本中上传之前 validate 文件？
我想在 angular 4 及更高版本中进行 file type 和 file size 验证。
Screenshot of my issue

对于除 .msg 文件之外的每个文件，我都得到了正确的文件大小和类型。如何获得文件类型为 application/vnd.ms-outlook application/octet-stream 对于 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 类型。

angular 6 中上传前如何验证文件

how to validate files before uploading in angular 6

validation

file-upload

mime-types

angular6