ng2-file-upload插件在ionic3中的使用方法

本文主要说明在ionic3中使用ng2-file-upload插件，上传多种类型文件（图片、word、excel、ppt、mp4等）的使用方法。

1、html代码：

<button ion-button (click)="selectVideo()">添加</button>
<input id="uploadPic" ng2FileSelect [uploader]="uploader" type="file" (change)="handleVideo($event)"/>

 

2、在页面module.ts文件中引入FileUploaderModule模块，如course.module.ts文件中：

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

@NgModule({
    imports: [
        FileUploadModule
    ],
    declarations: [
        AddCourse,
    ],
    providers: [],
})
export class CourseModule {

}

3、添加文件大小及类型限制配置文件config.ts文件。

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'
    ],
}

 

3、在具体的ts文件中，使用方法，如：course.ts文件：import {FileUploader} from "ng2-file-upload";

// 引入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();
    }}                    
}    

 

5、总结：该插件最终是以formData数据格式传给后台的。