如何在Angular中實現(xiàn)文件上傳？在Angular中實現(xiàn)文件上傳方法分享！

上傳文件是大多數(shù)項目不可或缺的一部分。但是，在考慮文件上傳方法時，您應(yīng)該仔細評估項目的需求。您可以使用 Angular 組件手動上傳文件，例如 FormData、HttpClientModule 和響應(yīng)式表單。這些組件中的每一個都將用于不同的目的。 

在本文中，您將了解用于文件上傳的流行 Angular 組件，包括有關(guān)如何在 Angular 9 中實現(xiàn)文件上傳的快速教程。

什么是角？

Angular 是一個開發(fā)平臺和框架，您可以使用它在 JavaScript (JS) 或 TypeScript (TS) 中創(chuàng)建單頁應(yīng)用程序。該框架是用 TS 編寫的，并通過您可以導入到您的項目中的庫來實現(xiàn)。 

Angular 的基本結(jié)構(gòu)基于 NgModules，即組織成功能集的組件集合。這些模塊使您能夠定義 Angular 應(yīng)用程序并集成各種組件。您在 Angular 中創(chuàng)建的每個應(yīng)用程序都有一個根模塊，它支持引導，以及您需要的任何功能模塊。 

每個模塊內(nèi)都有組件。這些組件定義了可在您的應(yīng)用程序中使用的視圖。視圖是可以應(yīng)用代碼的一組屏幕元素。此外，組件包括服務(wù)。服務(wù)是提供功能并使您能夠創(chuàng)建高效模塊化應(yīng)用程序的類。

當您使用組件和內(nèi)部服務(wù)時，您依賴于元數(shù)據(jù)來定義類型和用法。元數(shù)據(jù)將組件與視圖模板相關(guān)聯(lián)，將 HTML 與 Angular 指令和標記相結(jié)合。這使您可以在渲染之前修改 HTML。元數(shù)據(jù)也是 Angular 通過依賴注入提供服務(wù)的方式。

用于文件上傳的 Angular 組件

在 Angular 中，您可以使用多個組件來手動實現(xiàn)文件上傳。根據(jù)您希望如何使用上傳，您可能需要修改您對這些方法的使用，或者您可以簡單地采用預(yù)先構(gòu)建的文件上傳方法。例如，如果您使用的是數(shù)字資產(chǎn)管理工具，許多解決方案都提供了您可以輕松添加的方法。 

以下是使用 Angular 完成文件上傳的常用元素。

表單數(shù)據(jù)

FormData 是一個可以用來存儲鍵值對的對象。它使您能夠構(gòu)建與 HTML 表單對齊的對象。此功能允許您通過 HTTP 客戶端庫或 XMLHttpRequest 接口將數(shù)據(jù)（例如文件上傳）發(fā)送到 REST API 端點。 

要創(chuàng)建 FormData 對象，您可以使用以下內(nèi)容：

Java：

const  formData  =  new  FormData ();

此方法使您能夠直接添加鍵值或從現(xiàn)有的 HTML 表單中收集數(shù)據(jù)。 

HttpClient 模塊

HttpClientModule 是一個包含 API 的模塊，您可以使用它從 HTTP 服務(wù)器發(fā)送和獲取應(yīng)用程序的數(shù)據(jù)。它基于 XMLHttpRequest 接口。它包含使您能夠避免提取 JSON 數(shù)據(jù)、使用攔截器修改請求標頭以及將攔截器添加到提供程序標頭的功能。

您可以通過將以下內(nèi)容添加到 JSON 包文件中來導入此模塊：

java：

import {HttpClientModule} from '@angular/common/http';

反應(yīng)形式

反應(yīng)式表單使您能夠使用模型驅(qū)動的方法來處理具有變化值的表單輸入。使用這些表單，您可以在表單組中使用多個控件、驗證表單值以及構(gòu)建可以動態(tài)修改控件的表單。這是可能的，因為表單數(shù)據(jù)是作為不可變的、可觀察的流返回的，而不是像模板驅(qū)動的表單那樣的可變數(shù)據(jù)點。

您可以使用以下命令導入此模塊：

Java：

import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

如何在 Angular 9 中實現(xiàn)文件上傳：快速教程

如果您準備嘗試使用 Angular 應(yīng)用程序?qū)崿F(xiàn)文件上傳，您可以嘗試以下使用 FormData 和 HttpClientModule 的教程。本教程改編自Ahmed Bouchefra的較長教程。

要開始學習本教程，您需要具備以下條件：

• 文件共享服務(wù)，如 file.io 或 Dropbox
• Node.js 8.9+ 和 npm 5.5.1+ 的開發(fā)環(huán)境
• 角 CLI您可以在系統(tǒng) CLI 中使用 npm install -g @angular/cli 全局安裝它

1. 創(chuàng)建新應(yīng)用并啟動開發(fā)服務(wù)器

首先，您需要先創(chuàng)建一個應(yīng)用程序來處理上傳。您可以通過在終端中輸入以下內(nèi)容來創(chuàng)建新應(yīng)用程序：

java：

ng new {Application name} 

創(chuàng)建這個時，你需要指定是否添加 Angular 路由（是）和你的樣式表格式（CSS）。

接下來，您需要從終端啟動本地開發(fā)服務(wù)器：

java：

cd {Application name}
ng serve

這將啟動一個服務(wù)器并返回本地主機地址。在瀏覽器中打開返回的站點以查看您的應(yīng)用程序。

2.設(shè)置HttpClientModule

通過 Angular CLI 初始化您的項目并導入 HttpClientModule。為此，您需要打開 src/app/app.module.ts 文件。您可以使用以下方法執(zhí)行此操作：

java：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 添加控制組件和用戶界面

要添加UI 控件組件，您需要創(chuàng)建一個 home 和 about 組件。您可以使用以下命令在終端中添加這些：

java：

cd ~/angular-upload-example
ng generate component home
ng generate component about

要完成 UI，您可以手動創(chuàng)建組件或使用其他模塊，如 Angular Material。無論您選擇哪種方法，您至少需要定義您的 uploadFile() 方法并為您的用戶提供按鈕或提交方法。

然后，您需要通過以下方式將組件添加到路由器：src/app/app-routing.module.ts 文件。

java：

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';
const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'about', component: AboutComponent},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 創(chuàng)建您的上傳服務(wù)

首先，您需要使用以下內(nèi)容創(chuàng)建您的服務(wù)：

Java：

ng generate service upload

在 src/app/upload.service.ts 文件中，添加您的導入并注入您的 HTTP 客戶端：

java：

import {HttpClient, HttpEvent, HttpErrorResponse, HttpEventType} from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class UploadService { 
    SERVER_URL: string = "{Server URL}";
    constructor(private httpClient: HttpClient) { }

您還需要添加您的上傳方法，該方法允許您調(diào)用 post 方法并將數(shù)據(jù)發(fā)送到您的上傳服務(wù)器。 

java：

public upload(formData) {
    return this.httpClient.post<any>(this.SERVER_URL, formData, {
      reportProgress: true,
      observe: 'events'
    });
}

5. 定義你的上傳方法

創(chuàng)建服務(wù)后，您需要定義上傳方法并添加錯誤處理。如果您愿意，您還可以在此處添加進度條元素并更改 UI 樣式。 

在 src/app/home/home.component.ts 文件中，添加您的導入。

java：

import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {HttpEventType, HttpErrorResponse} from '@angular/common/http';
import {of} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import {UploadService} from '../upload.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})  
export class HomeComponent implements OnInit {
    @ViewChild("fileUpload", {static: false}) fileUpload: ElementRef;files = [];
    constructor(private uploadService: UploadService) { }

現(xiàn)在您可以定義您的方法和變量，并注入您的上傳服務(wù)。

java：

uploadFile(file) {
    const formData = new FormData();  
    formData.append('file', file.data);  
    file.inProgress = true;
    this.uploadService.upload(formData).pipe(
      map(event => {
        switch (event.type) {
          case HttpEventType.UploadProgress:
            file.progress = Math.round(event.loaded * 100 / event.total);
            break;
          case HttpEventType.Response:
            return event;
        }  
      }),  
      catchError((error: HttpErrorResponse) => {
        file.inProgress = false;
        return of(`Upload failed: ${file.data.name}`);
      })).subscribe((event: any) => {
        if (typeof (event) === 'object') {
          console.log(event.body);
        }  
      });  
  }

為了讓用戶能夠提交文件，您還應(yīng)該定義一個與提交按鈕相關(guān)聯(lián)的 onClick() 方法。 

java：

onClick() {
    const fileUpload = this.fileUpload.nativeElement;fileUpload.onchange = () => {
    for (let index = 0; index < fileUpload.files.length; index++)
    {
     const file = fileUpload.files[index];
     this.files.push({ data: file, inProgress: false, progress: 0});
    }
      this.uploadFiles();
    };
    fileUpload.click();
}

您現(xiàn)在可以通過本地瀏覽器測試您的應(yīng)用程序，以確保它按預(yù)期運行。 

結(jié)論

希望您現(xiàn)在有足夠的信息來試驗 Angular 文件上傳組件。如果您不熟悉該過程，請確保在測試環(huán)境或任何可以安全地從錯誤中吸取教訓的地方進行實驗。繼續(xù)嘗試和學習不同類型的方法，直到找到最適合您的方法組合。