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) => {

});

}

你可能感兴趣的:(ionic图片上传)