请查看以下有角材料图像上传示例：
上传图像.组件.html：

<div *ngFor="let progressInfo of progressInfos">
  <span>{{ progressInfo.fileName }}</span>
  <mat-toolbar class="progress-bar">
    <mat-progress-bar
      color="accent"
      [value]="progressInfo.value"
    ></mat-progress-bar>
    <span class="progress">{{ progressInfo.value }}%</span>
  </mat-toolbar>
</div>

<mat-form-field>
  <div>
    <mat-toolbar>
      <input matInput [value]="selectedFileNames.length ? selectedFileNames : 'Select Images'" />

      <button
        mat-flat-button
        color="primary"
        [disabled]="!selectedFiles"
        (click)="uploadFiles()"
      >
        Upload
      </button>
    </mat-toolbar>

    <input
      type="file"
      id="fileInput"
      name="fileInput"
      accept="image/*" multiple 
      (change)="selectFiles($event)"
    />
  </div>
</mat-form-field>

<div>
  <img *ngFor='let preview of previews' [src]="preview" class="preview">
</div>

<div *ngIf="message.length" class="message">
  <ul *ngFor="let msg of message; let i = index">
    <li>{{ msg }}</li>
  </ul>
</div>

<mat-card class="list-card">
  <mat-card-header>
    <mat-card-title>List of Images</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-list role="list">
      <mat-list-item role="listitem" *ngFor="let image of imageInfos | async" class="list-item">
        <p matLine><a href="{{ image.url }}">{{ image.name }}</a></p>
        <img src="{{ image.url }}" alt="{{ image.name }}" height="50px"/>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

上传图像.组件.ts：

import { Component, OnInit } from '@angular/core';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { FileUploadService } from '../../services/file-upload.service';

@Component({
  selector: 'app-upload-images',
  templateUrl: './upload-images.component.html',
  styleUrls: ['./upload-images.component.css']
})
export class UploadImagesComponent implements OnInit {
  selectedFiles?: FileList;
  selectedFileNames: string[] = [];

  progressInfos: any[] = [];
  message: string[] = [];

  previews: string[] = [];
  imageInfos?: Observable<any>;

  constructor(private uploadService: FileUploadService) {}

  ngOnInit(): void {
    this.imageInfos = this.uploadService.getFiles();
  }

  selectFiles(event: any): void {
    this.message = [];
    this.progressInfos = [];
    this.selectedFileNames = [];
    this.selectedFiles = event.target.files;

    this.previews = [];
    if (this.selectedFiles && this.selectedFiles[0]) {
      const numberOfFiles = this.selectedFiles.length;
      for (let i = 0; i < numberOfFiles; i++) {
        const reader = new FileReader();

        reader.onload = (e: any) => {
          console.log(e.target.result);
          this.previews.push(e.target.result);
        };

        reader.readAsDataURL(this.selectedFiles[i]);

        this.selectedFileNames.push(this.selectedFiles[i].name);
      }
    }
  }

  upload(idx: number, file: File): void {
    this.progressInfos[idx] = { value: 0, fileName: file.name };

    if (file) {
      this.uploadService.upload(file).subscribe(
        (event: any) => {
          if (event.type === HttpEventType.UploadProgress) {
            this.progressInfos[idx].value = Math.round(
              (100 * event.loaded) / event.total
            );
          } else if (event instanceof HttpResponse) {
            const msg = 'Uploaded the file successfully: ' + file.name;
            this.message.push(msg);
            this.imageInfos = this.uploadService.getFiles();
          }
        },
        (err: any) => {
          this.progressInfos[idx].value = 0;
          const msg = 'Could not upload the file: ' + file.name;
          this.message.push(msg);
        }
      );
    }
  }

  uploadFiles(): void {
    this.message = [];

    if (this.selectedFiles) {
      for (let i = 0; i < this.selectedFiles.length; i++) {
        this.upload(i, this.selectedFiles[i]);
      }
    }
  }
}

工作堆栈 lightning 战示例here。