ionic3 调取相册并上传图片

调取相册

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.+
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 人与人相处有四个道理:一你好我坏,二你对我错,三你大我小,四你有我无。 在一般人的观念里,都不喜欢你...
    相逢一笑307阅读 275评论 0 0
  • 昨儿调休一天,同事、朋友都在上班,无人可约,无奈之下打开电脑登上QQ,想要找那些曾经熟悉但是又很久都未见的朋友,滚...
    唐青竹阅读 174评论 0 0
  • 我走人间一趟,生而为人,我很抱歉。 《人间失格》,太宰治所著,在这本书里倾注其毕生心血,更是其性格的真实...
    Nlwcever阅读 437评论 0 1
  • 现今社会很多艺术家都在追求儿童艺术中的质朴、纯真和自然,有些人甚至认为儿童艺术与艺术品是没有区别的。诚然,很多儿童...
    暖暖滴文子阅读 1,098评论 0 1