如何在以角度6上传之前验证文件

Question

如何在角度4及以上上传之前validate文件？ 我希望角度4及以上的file type和file size验证。 Screenshot of my issue

对于每个文件，我得到正确的文件大小和类型，除了.msg文件。如何将文件类型作为outlook / 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类型。