ionic3.7照相和多图片选择

做了ionic项目也有一段时间了，把之前做的笔记分享出来，仅供大家参考，一起学习、一起进步，我感觉学一门语言，就是去找实际的案列直接应用它，在实践中学习，今天介绍的是通过ionic UI组件ImagePicker、Camera进行照片和照相功能

1)首先你要想用这个组件必须要添加它，通过命令行npm install --save @ionic-native/camera 安装camera;

通过命令行npm install --save @ionic-native/image-picker 安装image-picker,但是注意除了这个命令还要安装插件cordova plugin add https:/github.com/Telerik-Verified-Plugins/ImagePicker.git，这个命令需要git，所以要按照git，这里就不多说了。

2)安装完命令就可以撸代码了，通过ActionSheetController 弹出选择框 选择照片和相机，代码如下：

let actionSheet = this.actionSheetCtrl.create({
        title: '',
        buttons: [
          {
            text: '拍照',
            handler: () => {
              this.getPhoto();
              console.log('拍照 clicked');
            }
          }, {
            text: '相册',
            handler: () => {
              this.getImage();
              console.log('相册 clicked');
            }
          }, {
            text: '取消',
            role: 'cancel',
            handler: () => {
              console.log('取消 clicked');
            }
          }
        ]
      });
    actionSheet.present();

3)多文件选择：代码如下：

let n = $('.uploadimg_list').children().length;
    const optionss= { maximumImagesCount:4-n};
this.imagePicker.getPictures(optionss).then((results) => {
      this.imageArr.splice(0, this.imageArr.length);
      let  results
 for (let i = 0; i < results.length; i++) {
        this.imageArr.push(results[i]);
        let img_list = $('.uploadimg_list');

          for (let i = 0; i < this.imageArr.length; i++) {
           resultess = '<div class="img_wrap">![](' + this.imageArr[i] + ')<div class="close_btn"></div></div>';
          }
          img_list.append(resultess);
          sessionStorage.setItem('imgtxt_imgs', JSON.stringify(this.imageArr));
        }

    }, (err) => {

      alert( '未选择');

    });

4)照相机：代码如下

 const options: CameraOptions = {
      quality: 50,
      destinationType: this.cameras.DestinationType.DATA_URL,
      encodingType: this.cameras.EncodingType.JPEG,
      mediaType: this.cameras.MediaType.PICTURE
    }
    this.cameras.getPicture(options).then((imageData) => {
      //this.imageArr.splice(0, this.imageArr.length);
      let  resultess;
      this.imageArr.push(imageData);
      let img_list = $('.uploadimg_list');
      resultess = '<div class="img_wrap">![](' + imageData + ')<div class="close_btn"></div></div>';
      img_list.append(resultess);
      sessionStorage.setItem('imgtxt_imgs', JSON.stringify(this.imageArr));
    }, (err) => {
      // Handle error
      alert( '未选择');
    });