美文网首页
ionic3 调取相册并上传图片

ionic3 调取相册并上传图片

作者: 南京确善能 | 来源:发表于2018-05-28 15:43 被阅读0次

    调取相册

    ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
    npm install --save @ionic-native/image-picker
    

    your message 是一个说明

     /**
       * 选择图片
       */
      imagePicker(){
        this.imgPicker.imgPicker().then(result=>{
          this.fileTransfer.upload(result[0],AppApi.api_pic_upload_native).then(data=>{ //这里是上传图片的回调
         console.log(data);
          })
        })
      }
    

    ImagePickerProvider

    import { ImagePicker } from '@ionic-native/image-picker';
    import { ImagePickerOptions } from '@ionic-native/image-picker';
    
    /**
     * 调取相册
     */
    @Injectable()
    export class ImagePickerProvider {
      
      constructor(public http: HttpClient,private imagePicker: ImagePicker) {
         //获取权限
        this.imagePicker.hasReadPermission().then(result=>{
          if(!result){
              this.imagePicker.requestReadPermission().then(result=>{
                console.log("读取权限:"+result)
              })
          }
        })
      }
    
      /**
       * 调取相册 获取图片
       */
      imgPicker():Promise<any>{
          const options : ImagePickerOptions={maximumImagesCount:1};//只选择一张图片
          return new Promise((resolve, reject) => {
            this.imagePicker.getPictures(options).then((results) => {
              resolve(results);
            }, (err) => { 
              reject(err)
            });
          });
      }
    }
    

    上传文件

    ionic cordova plugin add cordova-plugin-file-transfer
    npm install --save @ionic-native/file-transfer
    

    FileTransferProvider

    import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
    
    import { AppApi,AppConfig } from '../../app/config';
    /**
     * native操作文件
     */
    @Injectable()
    export class FileTransferProvider {
    
      constructor(public http: HttpClient,private transfer: FileTransferObject,private appCfg: AppConfig) {
      }
    
       /**
        * 上传文件
        * @param imgPath 文件路径
        * @param serverUrl 接口地址 
        */
      upload(imgPath,serverUrl):Promise<any>{
        let options: FileUploadOptions = {
           fileKey: 'pic',//表单name
           fileName: imgPath.substring(imgPath.lastIndexOf("/")+1,imgPath.length),
           httpMethod:'post',
           params:{}//自定义的参数
        }
        return new Promise((resolve, reject) => {
          this.transfer.upload(imgPath, serverUrl, options)
          .then((data) => {
            resolve(JSON.parse(data['response']));//这里返回的是没有处理的过的
          }, (err) => {
            reject(err)
          })
        });
       
      }
    }
    

    闪退问题

    cordova plugin add cordova-android-support-gradle-release  --variable ANDROID_SUPPORT_VERSION=26.+
    

    相关文章

      网友评论

          本文标题:ionic3 调取相册并上传图片

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