在 Angular 中上傳圖片

Rana Hasnain Khan 2023年1月30日 2022年4月20日
  1. 在 Angular 中上傳圖片
  2. 在 Angular 中匯出元件和宣告變數
  3. Angular 中多個影象的基本上傳
  4. Angular 中單個影象的基本上傳
  5. Angular 中多個影象的上傳和進度
  6. Angular 中單個影象的上傳和進度
  7. 在 Angular 中呼叫上傳函式
在 Angular 中上傳圖片

本文介紹以下內容:

  1. 使用 Angular 上傳四種不同風格的圖片。
  2. 圖片上傳時顯示進度條。
  3. 上傳完成後顯示圖片上傳完成資訊。

在 Angular 中上傳圖片

影象是任何 Web 應用程式的基本組成部分,每個網站都有影象。在本教程中,我們將學習如何以不同的方式在 Angular 中上傳影象。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後,我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在,讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

我們將為檔案上傳器匯入庫並設定元件。

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

@Component({
  selector: 'my-app',
  template: `
    <input type="file" accept=".jpg,.png" class="button" (change)="upload($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})

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

我們將匯出我們的 AppComponent 並將變數 percentDone 宣告為 numberUploadSuccess 作為 boolean。我們還將宣告一個建構函式,它呼叫 HttpClient

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

  constructor(private http: HttpClient) {}

Angular 中多個影象的基本上傳

Angular 中有 4 種不同風格的圖片上傳;多張圖片的基本上傳就是其中之一。可以以這種樣式上傳多張圖片,而不顯示圖片的進度條。

basicUploadImage(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 中單個影象的基本上傳

在 Angular 中上傳圖片的第二種方式是圖片檔案的基本上傳。在這種風格中,使用者一次只能上傳一張圖片。

上傳影象時,此樣式也不會顯示進度。

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

Angular 中多個影象的上傳和進度

在 Angular 中上傳圖片的第三種方式是上傳多張圖片的進度。使用者可以上傳多張圖片,進度條顯示以這種風格上傳的百分比。

uploadImageAndProgress(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 中單個影象的上傳和進度

在 Angular 中上傳圖片的第四種風格是帶有進度條的單張圖片。使用者可以上傳帶有進度條的單個影象,顯示以這種樣式上傳的百分比。

uploadAndProgressSingleImage(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 中新增了四個上傳功能;我們可以使用所需的樣式呼叫我們的上傳函式。

uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

輸出:

Angular 上傳圖片

概括

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

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

@Component({
  selector: 'my-app',
  template: `
    <input type="file" accept=".jpg,.png" class="button" (change)="uploadImage($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(private http: HttpClient) {}

  uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

  basicUploadImage(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');
    });
  }

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

  uploadImageAndProgress(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;
        }
      });
  }

  uploadAndProgressSingleImage(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;
        }
      });
  }
}

此處演示

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn