ionic3+angular图片上传

1. service里面这样写

import  {Camera}  from  '@ionic-native/camera'

/**

* 使用cordova-plugin-camera获取照片的base64

*@paramoptions

*/

getPicture=(options)=>{

returnnewPromise((resolve,reject)=>{

this.camera.getPicture(Object.assign({

sourceType:this.camera.PictureSourceType.CAMERA,//图片来源,CAMERA:拍照,PHOTOLIBRARY:相册

destinationType:this.camera.DestinationType.DATA_URL,//返回值格式,DATA_URL:base64,FILE_URI:图片路径

quality:90,//保存的图像质量,范围为0 - 100

allowEdit:true,//选择图片前是否允许编辑

encodingType:this.camera.EncodingType.JPEG,

targetWidth:800,//缩放图像的宽度(像素)

targetHeight:800,//缩放图像的高度(像素)

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

correctOrientation:true//设置摄像机拍摄的图像是否为正确的方向

},options)).then((imageData)=>{

resolve(imageData);

}, (err)=>{

console.log(err);

err==20?this.showToast('没有权限,请在设置中开启权限'):reject(err);

});

});

};

/**

* 通过图库获取照片

*@paramoptions

*/

getPictureByPhotoLibrary=(options={})=>{

returnnewPromise((resolve)=>{

this.getPicture(Object.assign({

sourceType:this.camera.PictureSourceType.PHOTOLIBRARY

},options)).then(imageBase64=>{

resolve(imageBase64);

}).catch(err=>{

String(err).indexOf('cancel')!=-1?this.showToast('取消选择图片',1500):this.showToast('获取        照片失败');

});

});

};

/**

* 通过拍照获取照片

*@paramoptions

*/

getPictureByCamera=(options={})=>{

returnnewPromise((resolve)=>{

this.getPicture(Object.assign({

sourceType:this.camera.PictureSourceType.CAMERA

},options)).then(imageBase64=>{

resolve(imageBase64);

}).catch(err=>{

String(err).indexOf('cancel')!=-1?this.showToast('取消拍照',1500):this.showToast('获取照片失败');

});

});

};

2. **.ts

/**

*--------- 图片上传,相册选择,保存 ---------

*/

isChange:boolean=false;// 头像是否改变标识

avatarPath:string='http://pic.qiantucdn.com/58pic/14/86/69/17F58PICNfK_1024.jpg!/fw/780/watermark/url/L3dhdGVybWFyay12MS4zLnBuZw==/align/center';// 用户默认头像

imageBase64:string;// 保存头像base64,用于上传

isShowSave:boolean=false;

// 2017/10/23

getPicture(type) {      //   1拍照,0从图库选择

letoptions={

targetWidth:350,

targetHeight:220,

quality:100

};

if(type===1) {

this.nativeService.getPictureByCamera(options).then(imageBase64=>{

this.getPictureSuccess(imageBase64);

this.isShowSave=true;

});

}else{

this.nativeService.getPictureByPhotoLibrary(options).then(imageBase64=>{

this.getPictureSuccess(imageBase64);

this.isShowSave=true;

});

}

}

privategetPictureSuccess(imageBase64) {

this.isChange=true;

this.imageBase64=imageBase64;

this.avatarPath='data:image/jpeg;base64,'+imageBase64;

}

saveAvatar() {

if(this.isChange) {

alert(this.imageBase64);//这是头像数据.

this.nativeService.showLoading('正在上传....');

// this.viewCtrl.dismiss({avatarPath: this.avatarPath}); // 这里可以把头像传出去.

}else{

this.dismiss();

}

}


// 2017/10/20

presentActionSheet() {

constactionSheet=this.actionSheetCtrl.create({

title:'选择上传',

buttons:[

{

text:'相册选择',

handler:()=>{

this.getPicture(0);

}

},

{

text:'拍照',

handler:()=>{

this.getPicture(1)

}

},

{

text:'取消',

role:'cancel',

handler:()=>{

console.log('Cancel clicked');

}

}

]

});

actionSheet.present();

}

3.HTML

// 上传店铺首图

<img  (click)="presentActionSheet()"   [src]="avatarPath">

推荐阅读更多精彩内容