ionic3 调用本地相册并上传图片

最新推荐文章于 2023-03-06 17:17:59 发布

strong90

最新推荐文章于 2023-03-06 17:17:59 发布

阅读量1.1w

点赞数 1

分类专栏： ionic 文章标签： ionic3 图片照相上传照片上传

本文链接：https://blog.csdn.net/strong90/article/details/78875441

版权

ionic 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

需要的插件(ionic 官网 native中均有):

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

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

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="需要访问您的相册"
$ npm install --save @ionic-native/image-picker

app.module.ts 导入插件

import { ImagePicker } from '@ionic-native/image-picker';
import { FileTransfer, FileUploadOptions, FileTransferObject }from'@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

在provides中声明

providers: [
    .....
    Camera,
    ImagePicker,
    File,
    FileTransferObject,
    FileTransfer
]

自定义services:

图片上传的service,


import {
  Injectable
} from "@angular/core";
import {
  ActionSheetController
} from "ionic-angular";
import {
  ImagePicker
} from '@ionic-native/image-picker';
import {
  Camera
} from '@ionic-native/camera';
import {
  FileTransfer,
  FileUploadOptions,
  FileTransferObject
} from '@ionic-native/file-transfer';
import {
  File
} from '@ionic-native/file';
import {
  ToastService
} from "../toast-service/toast-service";


@Injectable()

export classImgService {

  // 调用相机时传入的参数
  private cameraOpt = {
    quality: 50,
    destinationType: 1, // Camera.DestinationType.FILE_URI,
    sourceType: 1, // Camera.PictureSourceType.CAMERA,
    encodingType: 0, // Camera.EncodingType.JPEG,
    mediaType: 0, // Camera.MediaType.PICTURE,
    allowEdit: true,
    correctOrientation: true
  };

  // 调用相册时传入的参数
  private imagePickerOpt = {
    maximumImagesCount: 1, //选择一张图片
    width: 800,
    height: 800,
    quality: 80
  };



  // 图片上传的的api
  public uploadApi: string;
  upload: any = {
    fileKey: 'upload', //接收图片时的key
    fileName: 'imageName.jpg',
    headers: {
      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' //不加入 发生错误！！
    },
    params: {}, //需要额外上传的参数
    success: (data) => {}, //图片上传成功后的回调
    error: (err) => {}, //图片上传失败后的回调
    listen: () => {} //监听上传过程
  };


  constructor(privateactionSheetCtrl: ActionSheetController,
    private noticeSer: ToastService,
    private camera: Camera,
    private imagePicker: ImagePicker,
    private transfer: FileTransfer,
    private file: File,
    private fileTransfer: FileTransferObject) {

    this.fileTransfer = this.transfer.create();
  }


  showPicActionSheet() {
    this.useASComponent();
  }

  // 使用ionic中的ActionSheet组件
  private useASComponent() {
    let actionSheet = this.actionSheetCtrl.create({
      title: '请选择',
      buttons: [
        {
          text: '拍照',
          handler: () => {
            this.startCamera();
          }
        },
        {
          text: '从手机相册选择',
          handler: () => {
            this.openImgPicker();
          }
        },
        {
          text: '取消',
          role: 'cancel',
          handler: () => {

          }
        }
      ]
    });
    actionSheet.present();
  }


  // 使用原生的ActionSheet组件

  /*private useNativeAS() {

  let buttonLabels = ['拍照', '从手机相册选择'];

  ActionSheet.show({

  'title': '选择',

  'buttonLabels': buttonLabels,

  'addCancelButtonWithLabel': 'Cancel',

  //'addDestructiveButtonWithLabel' : 'Delete'

  }).then((buttonIndex: number) => {

  if(buttonIndex == 1) {

  this.startCamera();

  } else if(buttonIndex == 2) {

  this.openImgPicker();

  }

  });

  }*/



  // 启动拍照功能

  private startCamera() {

    this.camera.getPicture(this.cameraOpt).then((imageData) => {

      this.uploadImg(imageData);

    }, (err) => {

      this.noticeSer.showToast('ERROR:' + err); //错误：无法使用拍照功能！

    });

  }



  // 打开手机相册

  private openImgPicker() {

    let temp = '';

    this.imagePicker.getPictures(this.imagePickerOpt)

      .then((results) => {

        for (var i = 0; i < results.length; i++) {

          temp = results[i];

        }



        this.uploadImg(temp);



      }, (err) => {

        this.noticeSer.showToast('ERROR:' + err); //错误：无法从手机相册中选择图片！

      });

  }



  // 上传图片

  private uploadImg(path: string) {

    if (!path) {

      return;

    }


    let options: any;

    options = {

      fileKey: this.upload.fileKey,

      headers: this.upload.headers,

      params: this.upload.params

    };

    this.fileTransfer.upload(path, this.uploadApi, options)

      .then((data) => {



        if (this.upload.success) {

          this.upload.success(JSON.parse(data.response));

        }



      }, (err) => {

        if (this.upload.error) {

          this.upload.error(err);

        } else {

          this.noticeSer.showToast('错误：上传失败！');

        }

      });

  }



  // 停止上传

  stopUpload() {

    if (this.fileTransfer) {

      this.fileTransfer.abort();

    }

  }

}





// 自定义一个弹框提示:

import {
  Injectable
} from '@angular/core';

import {
  ToastController
} from 'ionic-angular';



@Injectable()

export classToastService {

  static TOAST_POS_BOTTOM: string = 'top';

  static TOAST_POS_MIDDLE: string = 'middle';



  constructor(privatetoastCtrl: ToastController) {

  }



  // 显示 toast提示

  showToast(message: string, position: string = ToastService.TOAST_POS_BOTTOM) {

    let toast = this.toastCtrl.create({

      message: message,

      duration: 2000,

      position: position

    });

    toast.present();



    return toast;

  }



  showNoticeByToast(code: Number, msg: string) {

    let m = '';



    if (msg && msg.length > 0) {

      if (msg.charAt(msg.length - 1) == '!' || msg.charAt(msg.length - 1) == '！') {

        msg = msg.substr(0, msg.length - 1);

      }

    }



    if (code == 1) {

      m = '提示：' + msg + '！';

    } else {

      m = '错误' + code + '：' + msg + '！';

    }



    return this.showToast(m);

  }

}

使用:

private initImgSer() {

    this.imgSer.uploadApi = '.....';

    this.imgSer.upload.success= (data)=> {

    this.doctorData.avatar = data.data.url;

};

    this.imgSer.upload.error= (err)=> {

    this.toastSer.showToast('上传失败');

};

}



avatarChoice() {

    this.initImgSer();

    this.imgSer.showPicActionSheet();

}

ps: 来源于--http://blog.csdn.net/qq_15096707/article/details/70239990, 在此基础上做了更改