在Angular项目中使用ng2-file-upload上传文件

1.在项目目录下的package.json文件中加入组件 “ng2-file-upload”: “^1.3.0”。
2.在终端运行npm install命令下载组件。
3.在需要使用的Module中需要引入如下两个模块：

import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
…
@NgModule({
  declarations: [
    …
 ],
  imports: [
    …
    CommonModule,
    FileUploadModule
    …
  ],
  …
})
export class AppModule {}

4.在对应的Component中，引入FileUploader：

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

5.声明一个FileUploader类型的变量，并将其初始化：

public uploader: FileUploader = new FileUploader({
    url: this.config.rootUrl + "/images/upload", //上传地址
    method: "POST",  //上传方式
    itemAlias: "imageFile",  //别名（后台接受参数名）
    autoUpload: false  //是否自动上传（如果为true，则在input选择完后自动上传）
  });

6.页面：

<input type="file" ng2FileSelect [uploader]="uploader" 
                   class="form-control" id="imageFile" name="imageFile">

7.在component中加入方法：

 /**
   * 上传文件
   * @param content
   */
  uploadFile(content) {
  //附加额外参数
    this.uploader.setOptions({
      additionalParameter: {
        'name': 'file',
        'version': '0.1',
        'repository': 'first'
      }
    });
    // 开始上传
    this.uploader.queue[0].upload();
    //判断是否上传成功
    this.uploader.queue[0].onSuccess = function (response, status, headers) {
      // 上传文件成功
      if (status === 200) {
        console.log('上传成功');
      } else {
        console.log('上传失败');
      }
    }
  }