怎么在Angular中實現(xiàn)文件上傳

本篇內(nèi)容介紹了“怎么在Angular中實現(xiàn)文件上傳”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

什么是角？

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

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

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

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

用于文件上傳的 Angular 組件

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

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

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

FormData 是一個可以用來存儲鍵值對的對象。它使您能夠構建與 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 服務器發(fā)送和獲取應用程序的數(shù)據(jù)。它基于 XMLHttpRequest 接口。它包含使您能夠避免提取 JSON 數(shù)據(jù)、使用攔截器修改請求標頭以及將攔截器添加到提供程序標頭的功能。

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

java：

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

反應形式

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

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

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)建一個應用程序來處理上傳。您可以通過在終端中輸入以下內(nèi)容來創(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)建您的上傳服務

首先，您需要使用以下內(nèi)容創(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) { }

您還需要添加您的上傳方法，該方法允許您調(diào)用 post 方法并將數(shù)據(jù)發(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)在可以通過本地瀏覽器測試您的應用程序，以確保它按預期運行。 

“怎么在Angular中實現(xiàn)文件上傳”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！