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