在Angular中怎樣處理文件上傳和下載的功能

在Angular中處理文件上傳和下載的功能可以通過使用HTTP請求來實現。以下是一個簡單的示例：

文件上傳：

1. 創建一個組件，包含一個文件上傳的input元素和一個上傳按鈕。
2. 在組件中實現一個方法，用于處理文件上傳操作。該方法將選中的文件作為參數，并使用HttpClient模塊發送POST請求將文件上傳到服務器。
3. 在服務器端接收文件并進行處理，比如保存到指定目錄。

文件下載：

1. 創建一個組件，包含一個下載按鈕。
2. 在組件中實現一個方法，用于處理文件下載操作。該方法將發送GET請求到服務器端，獲取文件的下載地址。
3. 在服務器端，根據請求的文件名，讀取文件內容并返回給前端。

示例代碼：

文件上傳：

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

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

  onFileChange(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    this.http.post('http://localhost:3000/upload', formData)
      .subscribe(response => {
        console.log('File uploaded successfully');
      });
  }
}

文件下載：

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

@Component({
  selector: 'app-file-download',
  templateUrl: './file-download.component.html'
})
export class FileDownloadComponent {
  constructor(private http: HttpClient) {}

  downloadFile() {
    this.http.get('http://localhost:3000/download', { responseType: 'blob' })
      .subscribe(response => {
        const blob = new Blob([response], { type: 'application/pdf' });
        const url = window.URL.createObjectURL(blob);
        window.open(url);
      });
  }
}

注意：在實際應用中，需要根據具體的需求和服務器端的實現方式來對文件上傳和下載功能進行進一步的優化和處理。