ionic3从手机相册选择多张照片预览并上传到服务器

安装插件
①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"】用于存放选择的照片

[html]   view plain  copy

1. <ion-content padding>  
2.   <div padding-top>  
3.       <button ion-button block color="light" (click)="getPicture()">选择照片</button>  
4.   </div>    
5.   <div id="test-div" [innerHtml]="data"></div>  
6.   <div padding-top>  
7.       <button type="button" ion-button block (click)="saveAvatar()">保 存</button>  
8.   </div>  
9. </ion-content>  

ts编码
  常量声明

[javascript]   view plain  copy

1. url:any;  
2. avatarPath='./assets/imgs/logo.png';//默认图片  
3. data: string = "";  
4. imageBase64 : Array<string>=[];  

选择图片的方法

[javascript]   view plain  copy

1. getPicture(){  
2.   this.data="";  
3.   this.imageBase64=[];  
4.     
5.   // options 里的具体内容请参照官网https://ionicframework.com/docs/native/image-picker/  
6.   let options = {  
7.     maximumImagesCount: 5,  
8.     outputType: 1,  
9.     quality: 100  
10.   };  
11.   this.imagePicker.getPictures(options).then((results) => {  
12.     for (var i = 0; i < results.length; i++) {  
13.         console.log('Image URI: ' + results[i]);  
14.         // 保存图片到html控件  
15.         var imgUrl = "<img src=" +results[i] +" width=\"60px\" height=\"60px\">  ";  
16.         this.data=this.data+imgUrl;  
17.         // 转64字节  
18.         this.base64.encodeFile(results[i]).then((base64File: string) => {  
19.         this.imageBase64.push(base64File);  
20.         }, (err) => {  
21.           console.log(err);  
22.         });  
23.     }  
24.   }, (err) => {   
25.     alert("error");  
26.   });  
27. }  

保存图片到服务器

[javascript]   view plain  copy

1. saveAvatar() {  
2. for (var i = 0; i < this.imageBase64.length; i++) {  
3.   if (this.imageBase64[i] != "") {  
4.     let fileObj = <FileObj>{'base64': this.imageBase64[i]};  
5.     this.fileService.uploadByBase64(fileObj).subscribe(fileObj => {// 上传图片到服务器  
6.       alert("图片上传成功");  
7.     });  
8.   }  

1. }  

转自：https://blog.csdn.net/qingdatiankong/article/details/79160963