如何在Angular中实现文件上传？在Angular中实现文件上传方法分享！

2021-09-23 22:21:10 浏览数 (5)

上传文件是大多数项目不可或缺的一部分。但是，在考虑文件上传方法时，您应该仔细评估项目的需求。您可以使用 Angular 组件手动上传文件，例如 FormData、HttpClientModule 和响应式表单。这些组件中的每一个都将用于不同的目的。 

在本文中，您将了解用于文件上传的流行 Angular 组件，包括有关如何在 Angular 9 中实现文件上传的快速教程。

什么是角？

Angular 是一个开发平台和框架，您可以使用它在 JavaScript (JS) 或 TypeScript (TS) 中创建单页应用程序。该框架是用 TS 编写的，并通过您可以导入到您的项目中的库来实现。 

Angular 的基本结构基于 NgModules，即组织成功能集的组件集合。这些模块使您能够定义 Angular 应用程序并集成各种组件。您在 Angular 中创建的每个应用程序都有一个根模块，它支持引导，以及您需要的任何功能模块。 

每个模块内都有组件。这些组件定义了可在您的应用程序中使用的视图。视图是可以应用代码的一组屏幕元素。此外，组件包括服务。服务是提供功能并使您能够创建高效模块化应用程序的类。

当您使用组件和内部服务时，您依赖于元数据来定义类型和用法。元数据将组件与视图模板相关联，将 HTML 与 Angular 指令和标记相结合。这使您可以在渲染之前修改 HTML。元数据也是 Angular 通过依赖注入提供服务的方式。

用于文件上传的 Angular 组件

在 Angular 中，您可以使用多个组件来手动实现文件上传。根据您希望如何使用上传，您可能需要修改您对这些方法的使用，或者您可以简单地采用预先构建的文件上传方法。例如，如果您使用的是数字资产管理工具，许多解决方案都提供了您可以轻松添加的方法。 

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

表单数据

FormData 是一个可以用来存储键值对的对象。它使您能够构建与 HTML 表单对齐的对象。此功能允许您通过 HTTP 客户端库或 XMLHttpRequest 接口将数据（例如文件上传）发送到 REST API 端点。 

要创建 FormData 对象，您可以使用以下内容：

Java：

const  formData  =  new  FormData ();

此方法使您能够直接添加键值或从现有的 HTML 表单中收集数据。 

HttpClient 模块

HttpClientModule 是一个包含 API 的模块，您可以使用它从 HTTP 服务器发送和获取应用程序的数据。它基于 XMLHttpRequest 接口。它包含使您能够避免提取 JSON 数据、使用拦截器修改请求标头以及将拦截器添加到提供程序标头的功能。

您可以通过将以下内容添加到 JSON 包文件中来导入此模块：

java：

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

反应形式

反应式表单使您能够使用模型驱动的方法来处理具有变化值的表单输入。使用这些表单，您可以在表单组中使用多个控件、验证表单值以及构建可以动态修改控件的表单。这是可能的，因为表单数据是作为不可变的、可观察的流返回的，而不是像模板驱动的表单那样的可变数据点。

您可以使用以下命令导入此模块：

Java：

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

如何在 Angular 9 中实现文件上传：快速教程

如果您准备尝试使用 Angular 应用程序实现文件上传，您可以尝试以下使用 FormData 和 HttpClientModule 的教程。本教程改编自Ahmed Bouchefra的较长教程。

要开始学习本教程，您需要具备以下条件：

  • 文件共享服务，如 file.io 或 Dropbox
  • Node.js 8.9+ 和 npm 5.5.1+ 的开发环境
  • 角 CLI您可以在系统 CLI 中使用 npm install -g @angular/cli 全局安装它

1. 创建新应用并启动开发服务器

首先，您需要先创建一个应用程序来处理上传。您可以通过在终端中输入以下内容来创建新应用程序：

java：

ng new {Application name}

创建这个时，你需要指定是否添加 Angular 路由（是）和你的样式表格式（CSS）。

接下来，您需要从终端启动本地开发服务器：

java：

cd {Application name}
ng serve

这将启动一个服务器并返回本地主机地址。在浏览器中打开返回的站点以查看您的应用程序。

2.设置HttpClientModule

通过 Angular CLI 初始化您的项目并导入 HttpClientModule。为此，您需要打开 src/app/app.module.ts 文件。您可以使用以下方法执行此操作：

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 控件组件，您需要创建一个 home 和 about 组件。您可以使用以下命令在终端中添加这些：

java：

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

要完成 UI，您可以手动创建组件或使用其他模块，如 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. 创建您的上传服务

首先，您需要使用以下内容创建您的服务：

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 方法并将数据发送到您的上传服务器。 

java：

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

5. 定义你的上传方法

创建服务后，您需要定义上传方法并添加错误处理。如果您愿意，您还可以在此处添加进度条元素并更改 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) { }

现在您可以定义您的方法和变量，并注入您的上传服务。

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

为了让用户能够提交文件，您还应该定义一个与提交按钮相关联的 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();
}

您现在可以通过本地浏览器测试您的应用程序，以确保它按预期运行。 

结论

希望您现在有足够的信息来试验 Angular 文件上传组件。如果您不熟悉该过程，请确保在测试环境或任何可以安全地从错误中吸取教训的地方进行实验。继续尝试和学习不同类型的方法，直到找到最适合您的方法组合。 


HTML

0 人点赞