angular2 ng2-file-upload上传示例代码

npm install ng2-file-upload --save

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

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

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

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

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(); // 开始上传 }}

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

fileOverBase(event) { // 拖拽状态改变的回调函数}fileDropOver(event) { // 文件拖拽完成的回调函数}

uploadFileHandel() { this.uploader.queue[0].onSuccess = function (response, status, headers) {   // 上传文件成功   if (status == 200) {   // 上传文件后获取服务器返回的数据   let tempRes = JSON.parse(response);    }else {      // 上传文件后获取服务器返回的数据错误    } };this.uploader.queue[0].upload(); // 开始上传}

参数名         参数类型    是否是可选值    参数说明allowedMimeType    Array<string>  可选值  allowedFileType    Array<string>  可选值  允许上传的文件类型autoUpload       boolean     可选值  是否自动上传isHTML5        boolean     可选值  是否是HTML5filters        Array      可选值  headers        Array<Headers> 可选值  上传文件的请求头参数method         string     可选值  上传文件的方式authToken       string     可选值  auth验证的tokenmaxFileSize      number     可选值  最大可上传文件的大小queueLimit       number     可选值  removeAfterUpload   boolean     可选值  是否在上传完成后从队列中移除url          string     可选值  上传地址disableMultipart    boolean     可选值  itemAlias       string     可选值  文件标记／别名authTokenHeader    string     可选值  auth验证token的请求头