*安裝的外掛要引入到app.module.ts中。

html編碼 【[innerHtml]="data"】用於存放選擇的照片

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

ts編碼
  常量宣告

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

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

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