ionic3從手機相簿選擇多張照片預覽並上傳到伺服器
阿新 • • 發佈:2019-01-23
安裝外掛
①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
[javascript]view plaincopy
[javascript]view plaincopy
①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>
- <divid="test-div" [innerHtml]="data"></div>
- <div padding-top>
- <buttontype="button"
- </div>
- </ion-content>
ts編碼
常量宣告
- url:any;
- avatarPath='./assets/imgs/logo.png';//預設圖片
- data: string = "";
- imageBase64 : Array<string>=[];
[javascript]view plaincopy
- 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");
- });
- }
[javascript]view plaincopy
- 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("圖片上傳成功");
- });
- }
- }
轉自:https://blog.csdn.net/qingdatiankong/article/details/79160963