安装插件
①image-picker选择多张照片--参照https://ionicframework.com/docs/native/image-picker/
命令
--ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
由于Android6.0以后,有权限限制,如果官网的插件出现闪退的情况,可采用以下插件。
cordova plugin add https://github.com/Findiglay/cordova-imagePicker.git
npm install --save @ionic-native/image-picker
也可以使用android-permissions插件,进行权限判断并赋予。
具体可参照https://ionicframework.com/docs/native/android-permissions/
②base64转64字节码--参照https://ionicframework.com/docs/native/base64/
命令
ionic cordova plugin add com-badrit-base64
npm install --save @ionic-native/base64
①image-picker选择多张照片--参照https://ionicframework.com/docs/native/image-picker/
命令
--ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
由于Android6.0以后,有权限限制,如果官网的插件出现闪退的情况,可采用以下插件。
cordova plugin add https://github.com/Findiglay/cordova-imagePicker.git
npm install --save @ionic-native/image-picker
也可以使用android-permissions插件,进行权限判断并赋予。
具体可参照https://ionicframework.com/docs/native/android-permissions/
②base64转64字节码--参照https://ionicframework.com/docs/native/base64/
命令
ionic cordova plugin add com-badrit-base64
npm install --save @ionic-native/base64
*安装的插件要引入到app.module.ts中。
html编码 【[innerHtml]="data"】用于存放选择的照片
<ion-content padding>
<div padding-top>
<button ion-button block color="light" (click)="getPicture()">选择照片</button>
</div>
<div id="test-div" [innerHtml]="data"></div>
<div padding-top>
<button type="button" ion-button block (click)="saveAvatar()">保 存</button>
</div>
</ion-content>
ts编码
常量声明
url:any;
avatarPath='./assets/imgs/logo.png';//默认图片
data: string = "";
imageBase64 : Array<string>=[];
选择图片的方法
getPicture(){
this.data="";
this.imageBase64=[];
// options 里的具体内容请参照官网https://ionicframework.com/docs/native/image-picker/
let options = {
maximumImagesCount: 5,
outputType: 1,
quality: 100
};
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
// 保存图片到html控件
var imgUrl = "<img src=" +results[i] +" width=\"60px\" height=\"60px\"> ";
this.data=this.data+imgUrl;
// 转64字节
this.base64.encodeFile(results[i]).then((base64File: string) => {
this.imageBase64.push(base64File);
}, (err) => {
console.log(err);
});
}
}, (err) => {
alert("error");
});
}
保存图片到服务器
saveAvatar() {
for (var i = 0; i < this.imageBase64.length; i++) {
if (this.imageBase64[i] != "") {
let fileObj = <FileObj>{'base64': this.imageBase64[i]};
this.fileService.uploadByBase64(fileObj).subscribe(fileObj => {// 上传图片到服务器
alert("图片上传成功");
});
}
}
}