美文网首页
ionic图片上传

ionic图片上传

作者: 开着拖拉机迎接朝阳 | 来源:发表于2017-07-05 14:00 被阅读0次

    1.多个图片上传

    $ ionic cordova plugin add cordova-plugin-camera

    $ npm install --save @ionic-native/camera

    导入模块:import { Camera, CameraOptions } from '@ionic-native/camera';

    app.module.ts中引入模块;

    事件执行:

    addImg() {

    if (this.imagePaths.length == 3) {

    let tipLoader = this.loadingCtrl.create({

    content: "最多添加3张!",

    spinner: 'hide',

    duration: 800,

    showBackdrop: true

    });

    tipLoader.present();

    return;

    }

    let actionSheet = this.actionsheetCtrl.create({

    cssClass: 'action-sheets-basic-page',

    buttons: [

    {

    text: '拍照',

    handler: () => {

    this.takePhoto();

    }

    },

    {

    text: '从手机相册选择',

    handler: () => {

    this.choosePhoto();

    }

    },

    {

    text: '取消',

    role: 'cancel',

    handler: () => {

    console.log('取消选择图片');

    }

    }

    ]

    });

    actionSheet.present();

    };

    takePhoto() {

    var options = {

    // Some common settings are 20, 50, and 100

    quality: 50,

    destinationType: this.camera.DestinationType.FILE_URI,

    // In this app, dynamically set the picture source, Camera or photo gallery

    width:50,

    height:50,

    encodingType: this.camera.EncodingType.JPEG,

    mediaType: this.camera.MediaType.PICTURE,

    saveToPhotoAlbum:true,

    sourceType:this.camera.PictureSourceType.CAMERA,//拍照时,此参数必须有,否则拍照之后报错,照片不能保存

    correctOrientation: true  //Corrects Android orientation quirks

    }

    /**

    * imageData就是照片的路径,关于这个imageData还有一些细微的用法,可以参考官方的文档。

    */

    this.camera.getPicture(options).then((imageData) => {

    // imageData is either a base64 encoded string or a file URI

    // If it's base64:

    let base64Image =  imageData;

    // this.path = base64Image;//给全局的文件路径赋值。

    this.imagePaths.push(base64Image);

    /*  this.zone.run(() => this.image = base64Image);*/

    }, (err) => {

    // Handle error,出错后,在此打印出错的信息。

    alert( err.toString());

    });

    }

    choosePhoto() {

    var options: CameraOptions = {

    // Some common settings are 20, 50, and 100

    quality: 50,

    destinationType: this.camera.DestinationType.FILE_URI,

    // In this app, dynamically set the picture source, Camera or photo gallery

    sourceType:0,//0对应的值为PHOTOLIBRARY ,即打开相册

    encodingType: this.camera.EncodingType.JPEG,

    mediaType: this.camera.MediaType.PICTURE,

    allowEdit: true,

    correctOrientation: true  //Corrects Android orientation quirks

    }

    this.camera.getPicture(options).then((imageData) => {

    let base64Image =  imageData;

    this.imagePaths.push(base64Image);

    }, (err) => {

    });

    }

    相关文章

      网友评论

          本文标题:ionic图片上传

          本文链接:https://www.haomeiwen.com/subject/tghqhxtx.html