如果使用的是角材质，则可以使用垫微调器组件。检查链接。https://material.angular.io/components/progress-spinner/overview
基本上，你只需在html中实现mat-spinner，然后你可以使用ngif指令来显示加载spinner，当文件上传时。所以你可以有一个名为“uploading”的变量，它的值是true还是false取决于你是否上传了一个文件。请参阅下面的片段作为参考：

<mat-spinner *ngIf="uploading"></mat-spinner>

我希望，你在寻找什么。

你可以添加一个布尔标志，除了change事件，你还需要添加一个click事件。
在ts文件中：

// add a property to your class
public isOpening = false; // you can set it to true in the click event

// make sure to set it false in this method
handleFileInput(event: Event) {
 this.isOpening = false;
 ...
}

在html模板中：

<div class="form-group" *ngIf="!isOpening"> // you can hide the form after the user triggers the event
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (click) = "this.isOpening = true" // or create a method in the ts file
           (change)="handleFileInput($event.target.files)">
</div>

// here add a div or a spinner or whatever you like
<div *ngIf="isOpening"> Please wait! Dialog is opening...</div>

下面的代码显示了一个微调器，同时上传一个图像，并将此图像作为一个全宽的css背景横幅。它还删除微调器的情况下，取消按钮被击中。包含的css还隐藏了不可样式化的文件输入元素。

// component.html
<div class="banner" [style.background-image]="'url(' + base64 + ')'">
  <div><i class="fa-solid fa-photo-film"></i>...upload image</div>
  <input type="file" class="file-input" (change)="handleUpload($event)">
  <div class="loader" *ngIf="isLoading"></div>
</div>

// component.ts
base64 = '';
isLoading = false;

handleUpload(event: any) {
  this.isLoading = true;
  const file = event.target.files[0];
  if (!file) {
    this.isLoading = false;
    return;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    this.base64 = reader.result as string;
    this.isLoading = false;
  };
}

css用来隐藏不可设置样式的文件输入元素，并创建一个微调器。

// component.css
.banner {
  width: 100vw;
  height: 360px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 50px;
  color: #fff;
  transition: background 1s linear;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.banner input {
  display: none;
}
.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #2b2b2b;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  background-color: #2b2b2b;
}
.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-bottom-color: #FFF;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}