美文网首页前端大全
ionic3 ——多图上传

ionic3 ——多图上传

作者: 有梦想的风筝 | 来源:发表于2019-05-27 09:54 被阅读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博客,原创非抄袭

    相关文章

      网友评论

        本文标题:ionic3 ——多图上传

        本文链接:https://www.haomeiwen.com/subject/kgrctctx.html