前端大全

ionic3 ——多图上传

2019-05-27  本文已影响2人  有梦想的风筝

插件安装

ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"

npm install --save @ionic-native/image-picker

由于Android6.0以后,有权限限制,如果官网的插件出现闪退的情况,可采用以下插件。

cordova plugin add https://github.com/Findiglay/cordova-imagePicker.git
npm install --save @ionic-native/image-picker

(ps:该插件outputType:1返回的仍然是url地址,而非是base64)
插件安装完成之后不要忘记在app.module.ts中引入

主体代码

html部分:

//图片预览
<ion-slide class="takePhoto" *ngFor="let myPirture of upLoadImg; let i = index">
      <img [src]="myPirture.picture" />
</ion-slide>

ts部分:

getpicture(){
   this.options = {
       maximumImagesCount: 6,
       outputType: 1,
       quality: 80
   }
   this.imagePicker.getPictures(this.options).then((results) => {
       let savePicture: any = [];
       for (let i = 0; i < results.length; i++) {
          this.avatarPath = results[i];
          this.imageBase64 = <string>results[i];
          savePicture.push({ picture: this.avatarPath })//保存图片上传
          this.upLoadImg.push({ picture: this.avatarPath });//保存图片到html
      }

        if (savePicture.length > 0) {
            for (var i = 0; i < savePicture.length; i++) {   
            let fileObj = <FileObj>{'base64': savePicture[i].picture};  
            this.fileService.uploadByBase64(fileObj).subscribe(fileObj => {// 上传图片到服务器  
              alert("图片上传成功");  
            });  
        }  
    }
}

到这基本就算成功了,ios不会有闪退情况,可以使用官方插件

(觉得有帮助的小伙伴,帮忙赞一个!!!)
搬运自本人CSDN博客,原创非抄袭

上一篇下一篇

猜你喜欢

热点阅读