如何在Angular中處理文件上傳和進度條的顯示

在Angular中處理文件上傳和顯示進度條可以通過以下步驟實現：

1. 創建一個文件上傳服務：首先創建一個文件上傳服務，該服務將處理文件上傳的邏輯。可以使用HttpClient模塊發送POST請求來上傳文件。

import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';

@Injectable()
export class FileUploadService {

  constructor(private http: HttpClient) {}

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

    return this.http.post('http://example.com/upload', formData, {
      reportProgress: true,
      observe: 'events'
    });
  }
}

2. 創建一個文件上傳組件：創建一個文件上傳組件，用戶可以選擇文件并上傳。

<input type="file" (change)="onFileSelected($event)">
<button (click)="uploadFile()">Upload</button>

import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {

  selectedFile: File;

  constructor(private fileUploadService: FileUploadService) {}

  onFileSelected(event) {
    this.selectedFile = event.target.files[0];
  }

  uploadFile() {
    this.fileUploadService.uploadFile(this.selectedFile).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        const progress = Math.round(100 * event.loaded / event.total);
        // Update progress bar here
      } else if (event.type === HttpEventType.Response) {
        // File uploaded successfully
      }
    });
  }
}

3. 顯示上傳進度條：在上傳文件時，根據事件類型（HttpEventType.UploadProgress）更新進度條顯示。

<div *ngIf="progress">
  <div class="progress">
    <div class="progress-bar" role="progressbar" [style.width.%]="progress">
      {{ progress }}%
    </div>
  </div>
</div>

這樣就可以實現在Angular中處理文件上傳和顯示上傳進度條的功能。