使用 Angular 上传文件 - Javascript

上传文件是许多 Web 应用程序中必不可少的功能之一。Angular 提供了一种简单而强大的方式来处理文件上传。

在本文中，我们将一步一步地介绍如何使用 Angular 进行文件上传。我们将使用 Angular 的 HttpClient 和 FormData 类来实现这个功能。

构建 Angular 应用

首先，我们需要构建一个 Angular 应用。如果您已经有了一个 Angular 应用，请跳过这一步。

使用 Angular CLI 创建一个新的 Angular 应用：

ng new file-upload-app

这将在当前目录中创建一个名为 file-upload-app 的新 Angular 应用。然后使用以下命令进入该应用程序：

cd file-upload-app

创建文件上传组件

接下来，我们将创建一个组件来处理文件上传。

使用 Angular CLI 创建一个新的组件：

ng generate component file-upload

这将在 src/app 目录下创建一个新的 file-upload 组件。

现在，我们需要在 file-upload.component.html 模板文件中添加以下 HTML 代码：

<input type="file" (change)="onFileSelected($event)">
<button (click)="onUpload()">Upload</button>

在这里，我们添加了一个文件输入元素和一个上传按钮。

接着，打开 file-upload.component.ts 文件并添加以下代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {

  selectedFile: File = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
  }

  onUpload() {
    const fd = new FormData();
    fd.append('file', this.selectedFile, this.selectedFile.name);
    this.http.post('http://localhost:3000/upload', fd)
      .subscribe(res => {
        console.log(res);
      });
  }
}

在这里，我们导入了 Angular 的 HttpClient 类，并在组件构造函数中实例化了它。

我们还定义了两个方法：onFileSelected 和 onUpload。 onFileSelected 方法会从用户的计算机中选择文件，并将其存储在组件变量 selectedFile 中。onUpload 方法使用 selectedFile 变量，创建一个 FormData 对象，将文件附加到该对象中，并发出一个 POST 请求。

然后打开 app.module.ts 文件并添加以下代码：

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

@NgModule({
  declarations: [
    AppComponent,
    FileUploadComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在这里，我们导入了 Angular 的 HttpClientModule 并将其添加到 imports 数组中。这会让我们可以在组件中使用 HttpClient 类。

现在，在 app.component.html 模板文件中添加以下 HTML 代码：

<app-file-upload></app-file-upload>

这将向 app.component.html 添加一个 file-upload 组件。

运行应用

现在运行您的应用：

ng serve

这将在 http://localhost:4200 上启动您的应用程序。

选择一个文件并单击“上传”按钮，你会看到文件已经被成功地上传到控制台中。

这就是如何使用 Angular 实现文件上传功能。

总结

在本文中，我们使用 Angular 的 HttpClient 和 FormData 类，实现了一个简单而强大的文件上传功能。为了实现这个功能，我们创建了一个新的 Angular 应用程序，并添加了一个文件上传组件。最后，我们运行了应用程序并测试了文件上传功能。