Angular2中有兩個比較好用的上傳文件的第三方庫，一個是ng2-file-upload，一個是ng2-uploader。ng2-uploader是一個輕便的上傳文件的支持庫，功能較弱，而ng2-file-upload是一個功能比較全面的上傳文件的支持庫。這里主要介紹一下ng2-file-upload的使用。 

ng2-file-upload文件上傳

1、安裝ng2-file-upload模塊

npm install ng2-file-upload --save

2、如果使用systemjs打包，需要在配置systemjs.config.js文件

A、在System.config的map字段中的最后一行輸入以下字段：

'ng2-file-upload':'npm:ng2-file-upload'

B、在System.config的packages字段中的最后一行輸入：

'ng2-file-upload': {  main: 'index.js',  defaultExtension: 'js'}

3、在app.module.ts文件中，或者您有多個模塊，在需要的模塊中引入一下模塊

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

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

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

4、在自定義的上傳組件中使用ng2-file-upload

import {Component, OnInit} from "@angular/core";// A: 引入FileUpload模塊import {FileUploader} from "ng2-file-upload";@Component({ selector: "my-file", templateUrl: "./app/file.html"})export class HomeFileComponent implements OnInit { // B: 初始化定義uploader變量,用來配置input中的uploader屬性 public uploader:FileUploader = new FileUploader({  url: "http://localhost:3000/ng2/uploadFile",  method: "POST",  itemAlias: "uploadedfile" }); // C: 定義事件，選擇文件 selectedFileOnChanged(event:any) {  // 打印文件選擇名稱  console.log(event.target.value); } // D: 定義事件，上傳文件 uploadFile() {  // 上傳  this.uploader.queue[0].onSuccess = function (response, status, headers) {   // 上傳文件成功   if (status == 200) {    // 上傳文件后獲取服務器返回的數據    let tempRes = JSON.parse(response);   } else {    // 上傳文件后獲取服務器返回的數據錯誤    alert("");   }  };  this.uploader.queue[0].upload(); // 開始上傳 }}

5、對應的html內容

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />selectedFileOnChanged($event)在 .ts文件中定義selectedFileOnChanged(event: any) { console.log(event.target.value);}

選擇文件默認支持選擇單個文件，如需支持文件多選，請在標簽中添加multiple屬性，即：

代碼如下:<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />

6、拖拽上傳文件

支持多文件拖拽上傳

代碼如下:<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>