<button ion-button (click)="selectVideo()">添加</button>

<input id="uploadPic" ng2FileSelect [uploader]="uploader" type="file" (change)="handleVideo($event)"/>

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

@NgModule({

    imports: [

        FileUploadModule

    ],

    declarations: [

        AddCourse,

    ],

    providers: [],

})

export class CourseModule {

}

export const Conf = {

    maxFileSize: 104587600,

    allowedMimeType:['image/jpeg','image/png','application/msword',

        'application/vnd.ms-excel','application/vnd.ms-powerpoint',

        'audio/x-mpeg','video/mp4','audio/mpeg','audio/mp3',

        'application/x-shockwave-flash','video/x-ms-asf',

        'application/pdf',

        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

        'application/vnd.openxmlformats-officedocument.presentationml.presentation'

    ],

}

// 引入loading、toast公共方法

import {InterActive} from "../../../core/providers/interActive";

import {TranslateService} from '@ngx-translate/core';

import {FileUploader} from "ng2-file-upload";
import { Conf } from "../../../config";

export class AddCourse {

　　// 初始化文件上传实例化对象

    uploader: FileUploader;

    constructor(

        public translate: TranslateService,

        public interActive: InterActive,

    ) {

        i18n 代码国际化，翻译配置

        this.message = {

            size: "File size exceeds 100M, please upload again.",

            file: "File type is not supported. Please upload again.",

        };

        this.translate.get(this.message.size).subscribe(value => {

            this.message.size = value;

        });

        this.translate.get(this.message.file).subscribe(value => {

            this.message.file = value;

        });

　　// 直接添加文件上传监听事件

        this.uploadPack();

    }

    // 触发文件input标签，选择文件

public selectVideo() {

        document.getElementById('uploadPic').click();

    }

   //  选择文件后 处理文件大小和类型限制

    public handleVideo(event: any) {

        let url = event.target.value;

        url = url.split("\\");

　　　　　// 上传文件队列数量限制，大于1个时，先移除第一个文件

        if (this.uploader.queue.length > 1) {

            this.uploader.queue[0].remove();

        } else {

　　　　　　　　// 文件大小和类型限制

            if (event.target.files[0]) {

                let size = event.target.files[0].size;

                let mime = event.target.files[0].type;

                if (size > Conf.maxFileSize) {

                    this.interActive.toast(this.message.size);

                } else if (_.indexOf(Conf.allowedMimeType, mime) == -1) {

                    this.interActive.toast(this.message.file);

                }

            }

        }

    }

public uploadPack() {

　　　　　// 文件上传的服务器url地址

        let url = "http://mail.ym.163.com";

　　　　　// 文件上传参数配置（maxFileSize）最大文件限制，（allowMimeType）文件类型限制

        let options = {

            url: url,

            removeAfterUpload: true,

            method: "POST",

            maxFileSize: Conf.maxFileSize,

            allowedMimeType: Conf.allowedMimeType,

        };

        this.uploader = new FileUploader(options);

        // 文件上传之前监听事件

        this.uploader.onBeforeUploadItem = (fileItem: any) => {

            fileItem.method = "post";

            fileItem.alias = fileItem.file.name;

        };

　　　　　// 文件上传进度监听事件

        this.uploader.onProgressItem = (fileItem: any, progress: any) => {

　　　　　　

        };

　　　　　// 文件上传成功监听事件

        this.uploader.onSuccessItem = (item: any, response: string, status: number) => {

        };

　　　　　// 文件上传附带的其他额外数据

        this.uploader.onBuildItemForm = (fileItem: any, form: any) => {

            let data = [{

                files: [fileItem.file.name],

　　　　　　　　　　name:this.name,

　　　　　　　　　　.......

            }];

            console.log(fileItem)

            form.append('data', JSON.stringify(data));

        };

    }

    // 上传文件

    public uploadVideo() {

        this.uploader.uploadAll();

    }}

}