Angular2使用ng2-file-upload上传文件

最新推荐文章于 2022-05-19 20:49:21 发布

原创

最新推荐文章于 2022-05-19 20:49:21 发布 · 9.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular2 #文件上传

本文详细介绍了在Angular2中使用ng2-file-upload库进行文件上传的步骤和核心组件FileUploader与FileItem的属性、方法及监听事件，包括上传、取消、进度和回调等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular2使用ng2-file-upload上传文件

ng2-file-upload是一个功能比较全面的上传文件的支持库
（参考：http://www.jianshu.com/p/0741186f60ab
https://segmentfault.com/a/1190000007886391
http://valor-software.com/ng2-file-upload/）
Angular2使用ng2-file-upload上传文件：

1、安装ng2-file-upload模块：

npm install ng2-file-upload --save

2、在app.module.ts文件中，在需要的模块中引入一下模块

import { CommonModule }     from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';

然后在@NgModule的imports字段中引用CommonModule和FileUploadModule。

@NgModule({
   
   
    imports: [
        CommonModule,
        FileUploadModule
    ]
}

3、对应的app.component.html内容(代码有点乱，而且不知道为什么多选按钮有时弹框会很慢)

<div style="text-align:center">
  <h1>
    Welcome to {
  
  {title}}!!
  </h1>
</div>
<div>
  <form >
  <h1>多选</h1>
  <input type="file" ng2FileSelect [uploader]="uploader" name="fileInput"  id="fileInput" multiple  />
  <!--ng-submit="submit_form()"-->
  <!--<input type="file" name ="filer" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple   />-->
  <h1>单选</h1>
  <input type="file" name ="filer" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
  <table class="table bg-white-only b-a">
  <tbody>
      <div *ngFor="let img of