为什么我不能用angular-cli上传我的本地图片？

npm install @angular/material

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  imports: [
    MatButtonModule,
    MatInputModule,
    MatIconModule,
    MatProgressBarModule
  ],
  ...
})
export class YourModule { }

<input type="file" (change)="onFileSelected($event)">
<button mat-raised-button color="primary" (click)="uploadFile()">Upload</button>
<mat-progress-bar mode="determinate" [value]="uploadProgress"></mat-progress-bar>

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css']
})
export class YourComponent {
  uploadProgress: number = 0;

  constructor(private http: HttpClient) { }

  onFileSelected(event: any) {
    // 获取选择的文件
    const file: File = event.target.files[0];
    // 执行上传操作
    this.uploadFile(file);
  }

  uploadFile(file: File) {
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);

    this.http.post('your-upload-url', formData, {
      reportProgress: true,
      observe: 'events'
    }).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.uploadProgress = Math.round((100 * event.loaded) / event.total);
      } else if (event.type === HttpEventType.Response) {
        // 上传完成后的处理逻辑
      }
    });
  }
}