zoukankan      html  css  js  c++  java
  • 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数据格式传给后台的。

  • 相关阅读:
    C# 对象与JSON串互相转换
    C#通过WebClient/HttpWebRequest实现http的post/get方法
    UserAccountInfo时间倒计时
    C# 计时器的三种使用方法
    iOS:quartz2D绘图小项目(涂鸦画板)
    iOS:quartz2D绘图 (动画)
    iOS:网页视图控件UIWebView的详解
    iOS:图像选取器控制器控件UIImagePickerController的详解
    iOS:quartz2D绘图(显示绘制在PDF上的图片)
    iOS:quartz2D绘图(在PDF文件上绘制图片)
  • 原文地址:https://www.cnblogs.com/hsl-shiliang/p/9052115.html
Copyright © 2011-2022 走看看