ionic图片上传
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) => {
});
}