ionic开发的过程中遇到的问题及解决方法的整理（五）———多图上传

最新推荐文章于 2021-05-19 19:47:52 发布

有梦想的风筝

最新推荐文章于 2021-05-19 19:47:52 发布

阅读量350

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ionic ionic3开发文章标签： ionic3 ionic 多图上传 imagePicker闪退多图闪退

本文链接：https://blog.youkuaiyun.com/samll_cat/article/details/81668951

ionic 同时被 2 个专栏收录

13 篇文章

订阅专栏

ionic3开发

12 篇文章

订阅专栏

本文介绍如何在Ionic项目中安装并使用图片选择插件，包括解决Android6.0及以上版本的权限问题，以及如何将选中的图片转换为Base64格式，并上传到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件安装

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("图片上传成功");  
            });  
        }  
    }
}