ionic3 拍照或相册上传

作者: 亦久亦韭 | 来源:发表于2018-04-23 11:20 被阅读90次

    环境准备

    安装 cordova-plugin-camera 插件

    cordova plugin add cordova-plugin-camera

    npm install --save @ionic-native/camera

    安装File插件

    ionic cordova plugin add cordova-plugin-file

    npm install --save @ionic-native/file

    安装File Transfer插件

    ionic cordova plugin add cordova-plugin-file-transfer

    npm install --save @ionic-native/file-transfer

    在app.module.ts里做引用

    import { Camera } from "@ionic-native/camera";

    import { File } from "@ionic-native/file";

    import { FileTransfer } from "@ionic-native/file-transfer";

    providers: [

    StatusBar,

      SplashScreen,

      Camera,

      File,

      AlipayChenyu,

      FileTransfer,

    //修改头像

    doHead() {

    let actionSheet =this.actionsheetCtrl.create({

    buttons: [

    {

    text:'相机',

            icon: !this.platform.is('ios') ?'logo-instagram' :null,

            handler: () => {this.openCamera();  }

    },

          {

    text:'从相册中选一个',

            icon: !this.platform.is('ios') ?'md-image' :null,

            handler: () => {

    this.openlibray();

            }

    },

          {

    text:'取消',

            role:'cancel', // will always sort to be on the bottom

            icon: !this.platform.is('ios') ?'close' :null,

            handler: () => {

                console.log('Cancel clicked');

            }

    }

    ]

    });

      actionSheet.present();

    }

    /**

    * 打开摄像头

    */

    openCamera() {

    const options: CameraOptions = {

    allowEdit:true,

        quality:80,                                                  //相片质量0 -100

        targetWidth:500,//宽

        targetHeight:500,//高

        destinationType:this.camera.DestinationType.FILE_URI,        //DATA_URL是 base64  FILE_URL 是文件路径

        encodingType:this.camera.EncodingType.JPEG,

        mediaType:this.camera.MediaType.PICTURE,

        saveToPhotoAlbum:true,                                      //是否保存到相册

        sourceType:this.camera.PictureSourceType.CAMERA,        //是打开相机拍照还是打开相册选择  PHOTOLIBRARY : 相册选择, CAMERA : 拍照,

      }

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

    // If it's base64:

    // let base64Image = 'data:image/jpeg;base64,' + imageData;

    // this.path = base64Image;

    //If it's file URI

        let info=this.doStorage.get('info');

        this.http.upload('', {}, imageData).then((data) => {

    this.path = data;

        })

      }, (err) => {

    // Handle error

      });

    }

    openlibray() {

    const options: CameraOptions = {

    allowEdit:true,

        quality:80,                                                  //相片质量0 -100

        targetWidth:500,//宽

        targetHeight:500,//高

        destinationType:this.camera.DestinationType.FILE_URI,        //DATA_URL是 base64  FILE_URL 是文件路径

        encodingType:this.camera.EncodingType.JPEG,

        mediaType:this.camera.MediaType.PICTURE,

        saveToPhotoAlbum:true,                                      //是否保存到相册

        sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,        //是打开相机拍照还是打开相册选择  PHOTOLIBRARY : 相册选择, CAMERA : 拍照,

      }

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

    // If it's base64:

    // let base64Image = 'data:image/jpeg;base64,' + imageData;

    // this.path = base64Image;

    //If it's file URI

        let info=this.doStorage.get('info');

        this.http.upload('', {}, imageData).then((data) => {

    this.path = data;

        })

    }, (err) => {

    // Handle error

      });

    }

    /**

    * 图片上传

    * @param url  上传路径

    * @param josn    上传参数

    * @param img    上传图片

    * @returns {Promise}

    */

    upload(url, josn, img): Promise {

    return new Promise((resolve, reject) => {

    let info =this.storage.get('info');

        let apiPath =this.config.apiUrl + url;

        let options: FileUploadOptions = {

    fileKey:'file',

          fileName:'name.jpg',  //文件名称

          headers: josn,

          // 如果要传参数,写这里

          params: josn

    };

        this.fileTransfer.upload(img, apiPath, options)

    .then((data) => {

    resolve(img);

          }, (err) => {

    });

      });

    }

    相关文章

      网友评论

        本文标题:ionic3 拍照或相册上传

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