上傳文件是大多數項目不可或缺的一部分。但是，在考慮文件上傳方法時，您應該仔細評估項目的需求。您可以使用 Angular 組件手動上傳文件，例如 FormData、HttpClientModule 和響應式表單。這些組件中的每一個都將用于不同的目的。
在本文中，您將了解用于文件上傳的流行 Angular 組件，包括有關如何在 Angular 9 中實現(xiàn)文件上傳的快速教程。
什么是角？
Angular 是一個開發(fā)平臺和框架，您可以使用它在 JavaScript (JS) 或 TypeScript (TS) 中創(chuàng)建單頁應用程序。該框架是用 TS 編寫的，并通過您可以導入到您的項目中的庫來實現(xiàn)。
Angular 的基本結構基于 NgModules，即組織成功能集的組件集合。這些模塊使您能夠定義 Angular 應用程序并集成各種組件。您在 Angular 中創(chuàng)建的每個應用程序都有一個根模塊，它支持引導，以及您需要的任何功能模塊。
每個模塊內都有組件。這些組件定義了可在您的應用程序中使用的視圖。視圖是可以應用代碼的一組屏幕元素。此外，組件包括服務。服務是提供功能并使您能夠創(chuàng)建高效模塊化應用程序的類。
當您使用組件和內部服務時，您依賴于元數據來定義類型和用法。元數據將組件與視圖模板相關聯(lián)，將 HTML 與 Angular 指令和標記相結合。這使您可以在渲染之前修改 HTML。元數據也是 Angular 通過依賴注入提供服務的方式。
用于文件上傳的 Angular 組件
在 Angular 中，您可以使用多個組件來手動實現(xiàn)文件上傳。根據您希望如何使用上傳，您可能需要修改您對這些方法的使用，或者您可以簡單地采用預先構建的文件上傳方法。例如，如果您使用的是數字資產管理工具，許多解決方案都提供了您可以輕松添加的方法。
以下是使用 Angular 完成文件上傳的常用元素。
表單數據
FormData 是一個可以用來存儲鍵值對的對象。它使您能夠構建與 HTML 表單對齊的對象。此功能允許您通過 HTTP 客戶端庫或 XMLHttpRequest 接口將數據（例如文件上傳）發(fā)送到 REST API 端點。
要創(chuàng)建 FormData 對象，您可以使用以下內容：
Java：
const formData = new FormData ();此方法使您能夠直接添加鍵值或從現(xiàn)有的 HTML 表單中收集數據。
HttpClient 模塊
HttpClientModule 是一個包含 API 的模塊，您可以使用它從 HTTP 服務器發(fā)送和獲取應用程序的數據。它基于 XMLHttpRequest 接口。它包含使您能夠避免提取 JSON 數據、使用攔截器修改請求標頭以及將攔截器添加到提供程序標頭的功能。
您可以通過將以下內容添加到 JSON 包文件中來導入此模塊：
java：
import {HttpClientModule} from '@angular/common/http';反應形式
反應式表單使您能夠使用模型驅動的方法來處理具有變化值的表單輸入。使用這些表單，您可以在表單組中使用多個控件、驗證表單值以及構建可以動態(tài)修改控件的表單。這是可能的，因為表單數據是作為不可變的、可觀察的流返回的，而不是像模板驅動的表單那樣的可變數據點。
您可以使用以下命令導入此模塊：
Java：
import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }如何在 Angular 9 中實現(xiàn)文件上傳：快速教程
如果您準備嘗試使用 Angular 應用程序實現(xiàn)文件上傳，您可以嘗試以下使用 FormData 和 HttpClientModule 的教程。本教程改編自Ahmed Bouchefra的較長教程。
要開始學習本教程，您需要具備以下條件：
- 文件共享服務，如 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)建新應用并啟動開發(fā)服務器
首先，您需要先創(chuàng)建一個應用程序來處理上傳。您可以通過在終端中輸入以下內容來創(chuàng)建新應用程序：
java：
ng new {Application name} 創(chuàng)建這個時，你需要指定是否添加 Angular 路由（是）和你的樣式表格式（CSS）。
接下來，您需要從終端啟動本地開發(fā)服務器：
java：
cd {Application name}
ng serve這將啟動一個服務器并返回本地主機地址。在瀏覽器中打開返回的站點以查看您的應用程序。
2.設置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)建您的上傳服務
首先，您需要使用以下內容創(chuàng)建您的服務：
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) { }您還需要添加您的上傳方法，該方法允許您調用 post 方法并將數據發(fā)送到您的上傳服務器。
java：
public upload(formData) {
return this.httpClient.post<any>(this.SERVER_URL, formData, {
reportProgress: true,
observe: 'events'
});
}5. 定義你的上傳方法
創(chuàng)建服務后，您需要定義上傳方法并添加錯誤處理。如果您愿意，您還可以在此處添加進度條元素并更改 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)在您可以定義您的方法和變量，并注入您的上傳服務。
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);
}
});
}為了讓用戶能夠提交文件，您還應該定義一個與提交按鈕相關聯(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)在可以通過本地瀏覽器測試您的應用程序，以確保它按預期運行。
結論
希望您現(xiàn)在有足夠的信息來試驗 Angular 文件上傳組件。如果您不熟悉該過程，請確保在測試環(huán)境或任何可以安全地從錯誤中吸取教訓的地方進行實驗。繼續(xù)嘗試和學習不同類型的方法，直到找到最適合您的方法組合。
