要在上传文件之前进行文件验证并显示错误消息，您可以使用Angular的表单验证功能。以下是一个示例解决方案：

1. 首先，创建一个表单，其中包含一个文件输入字段和一个错误消息字段：

  
  

    

      文件是必需的。
    
    

      文件大小不能超过5MB。
    
    

      文件扩展名无效。
    
  
  上传文件

2. 在组件类中，创建和初始化表单：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  fileForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.fileForm = this.formBuilder.group({
      fileInput: ['', [Validators.required, this.validateFileSize, this.validateFileExtension]]
    });
  }

  validateFileSize(control) {
    const file = control.value;
    if (file && file.size > 5 * 1024 * 1024) {
      return { maxSize: true };
    }
    return null;
  }

  validateFileExtension(control) {
    const file = control.value;
    if (file) {
      const allowedExtensions = ['.jpg', '.png'];
      const fileExtension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
      if (!allowedExtensions.includes(fileExtension)) {
        return { invalidExtension: true };
      }
    }
    return null;
  }

  uploadFile() {
    // 处理文件上传逻辑
  }
}

在上面的代码中，我们使用Validators.required验证文件是否为空。然后，我们通过自定义验证器validateFileSize和validateFileExtension分别验证文件大小和扩展名。

3. 最后，在组件的模板中，使用formGroup指令将表单绑定到表单组件，并在输入字段上使用formControlName指令将其与验证器关联起来。

通过上述步骤，您可以在上传文件之前进行文件验证并显示相应的错误消息。