Angular 图像上传服务 - JavaScript

简介

Angular 图像上传服务是一个可插拔的Angular服务，用于上传图片。该服务提供了一些有用的特性，如进度条、事件监听和取消上传等。本文将介绍如何使用 Angular 图像上传服务。

安装和使用

安装 angular 图像上传服务：

npm install ng2-file-upload --save

在你的 Angular 模块中导入 ng2-file-upload 模块：

import { FileUploadModule } from 'ng2-file-upload';

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

在组件中调用：

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'app',
  template: `
    <div>
      <input type="file" name="file" ng2FileSelect [uploader]="uploader" />
      <button type="button" (click)="uploader.uploadAll()">Upload All</button>
    </div>
  `
})
export class AppComponent {
  public uploader: FileUploader = new FileUploader({url: 'http://localhost:3000/upload'});
}

选项和配置

使用 FileUploader 构造函数可以为上传器定义不同的选项和配置。其中一些选项和配置包括：

• url - 上传文件的 URL
• alias - 文件别名（默认为 file）
• method - 上传方法（默认为 POST）
• headers - 请求头

例如，你可以这样定义一个上传器：

public uploader: FileUploader = new FileUploader({
  url: 'http://localhost:3000/upload',
  method: 'PUT',
  headers: [{name: 'Authorization', value : 'Bearer ' + token}]
});

事件

上传器定义了许多事件，可以监听它们来了解文件上传的过程。一些主要事件包括：

• onAfterAddingFile - 添加一个文件后触发
• onWhenAddingFileFailed - 添加一个文件失败后触发
• onSuccessItem - 每个文件上传成功后触发
• onErrorItem - 每个文件上传失败后触发
• onCompleteAll - 所有文件上传成功后触发

例如，你可以这样监听 onSuccessItem 事件：

public uploader: FileUploader = new FileUploader({url: 'http://localhost:3000/upload'});

public ngOnInit() {
  this.uploader.onSuccessItem = (item: any, response: any, status: any, headers: any) => {
    console.log('Upload success');
  };
}

进度条

上传器提供了一个很棒的功能，就是可以显示上传进度条。你可以使用 Angular 的内置指令 ngStyle 来显示进度条：

<div *ngFor="let item of uploader.queue">
  <div class="progress" [ngStyle]="{ 'width': item.progress + '%' }">
    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
  </div>
</div>

取消上传

你可以使用 cancelAll 或 cancelItem 方法来取消上传。例如，你可以在模板中添加一个“取消”按钮：

<div *ngFor="let item of uploader.queue">
  <div class="progress" [ngStyle]="{ 'width': item.progress + '%' }">
    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
  </div>
  <button type="button" (click)="item.cancel()">Cancel</button>
</div>

总结

Angular 图像上传服务提供了一些有用的特性来上传图片，如进度条、事件监听和取消上传等。它易于使用，可以轻松地集成到 Angular 应用程序中。