在 Angular 中上傳檔案

1. 在 Angular 中匯入庫
2. 在 Angular 中匯出元件和宣告變數
3. 在 Angular 中使用 basicUpload() 上傳多個檔案
4. 在 Angular 中使用 basicUploadSingle() 上傳單個檔案
5. 在 Angular 中使用 uploadAndProgress() 上傳多個檔案
6. 在 Angular 中使用 UploadAndProgressSingle() 上傳單個檔案
7. Angular 呼叫上傳函式
8. 概括

我們將介紹如何使用 Angular 上傳檔案的四種不同方法。

我們還將介紹如何在檔案上傳時顯示進度條，並在上傳完成時顯示檔案上傳完成訊息。

在 Angular 中匯入庫

首先，我們將匯入庫併為檔案上傳器設定元件。

# angular
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})

在 Angular 中匯出元件和宣告變數

現在，我們將匯出我們的 AppComponent 並將變數 percentDone 宣告為 number 並將 UploadSuccess 宣告為布林值。我們還將宣告一個呼叫 HttpClient 的建構函式。

# angular
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION

在 Angular 中使用 basicUpload() 上傳多個檔案

Angular 有四種不同風格的檔案上傳，多個檔案的 basicUpload() 就是其中之一。可以以這種方式一次上傳多個檔案，而無需顯示任何檔案進度條。

basicUpload(files: File[]){
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file', f))
    this.http.post('https://file.io', formData)
      .subscribe(event => {
        console.log('done')
      })
  }

我們正在向 https://file.io 傳送上傳請求，可以使用 後端伺服器 URL 進行更改。後端伺服器將接收檔案的上傳資料，它將向上傳的檔案傳送一個 URL。

在 Angular 中使用 basicUploadSingle() 上傳單個檔案

在 Angular 中上傳檔案的第二種樣式是單個檔案的 basicUploadSingle()。在這種風格中，使用者一次只能上傳一個檔案。此樣式也不會在檔案上傳時顯示進度。

basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }

在 Angular 中使用 uploadAndProgress() 上傳多個檔案

在 Angular 中上傳檔案的第三種樣式是用於多個檔案的 uploadAndProgress()。使用者可以以這種方式同時上傳多個檔案，進度條會顯示上傳檔案的百分比。

uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))
    
    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

在 Angular 中使用 UploadAndProgressSingle() 上傳單個檔案

在 Angular 中上傳檔案的第四種風格是單個檔案的 uploadAndProgressSingle()。在這種風格中，使用者可以同時上傳單個檔案，進度條顯示上傳檔案的百分比。

uploadAndProgressSingle(file: File){
    this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

Angular 呼叫上傳函式

現在我們已經在 angular 中新增了四種樣式的上傳函式，我們可以使用所需的樣式呼叫我們的上傳函式。

upload(files: File[]){
    //pick from one of the 4 styles of file uploads below
    this.uploadAndProgress(files);
  }

輸出：

概括

我們討論了四種不同風格的檔案上傳方式，以及如何在我們的 upload 函式中呼叫它們。完整程式碼如下。

import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION
  
  upload(files: File[]){
    this.uploadAndProgress(files);
  }

  basicUpload(files: File[]){
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file', f))
    this.http.post('https://file.io', formData)
      .subscribe(event => {
        console.log('done')
      })
  }

  basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }
  
  uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))
    
    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }
  
  uploadAndProgressSingle(file: File){
    this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }
}

輸出：