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( '未选择');
});