Ionic2中的相册选择和拍照上传——ImgService

原创 2017年04月19日 14:26:44

目录

前言

  在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的。对于Ionic2,我们只能通过cordova插件实现调用原生的功能。下面将简单的封装一个选择相册或拍照上传图片的ImgService服务。具体如下。

Cordova准备

  下载安装所需的Cordovar插件:
Image Picker(相册选择)

ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker

Camera(拍照)

ionic plugin add cordova-plugin-camera

Transfer(上传文件)

ionic plugin add cordova-plugin-file-transfer

ImgService服务的实现

  通过显示ActionSheet组件,让用户选择上传图片的方式,如从相册选择或者拍照。具体如下:

/**
 * Created by admin on 2016/10/21.
 */
import { Injectable } from "@angular/core";
import { ActionSheetController } from "ionic-angular";
import { Camera, ImagePicker, Transfer } from "ionic-native";
import { NoticeService } from "./notice.service";

@Injectable()
export class ImgService {

  // 参考:https://github.com/driftyco/ionic-native/blob/master/src/plugins/camera.ts
  // 调用相机时传入的参数
  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
  };

  //imgPath: string = ''; //图片路径

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

  constructor(private actionSheetCtrl: ActionSheetController,
              private noticeSer: NoticeService) {

  }


  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() {
    Camera.getPicture(this.cameraOpt).then((imageData) => {

      this.uploadImg(imageData);

    }, (err) => {
      this.noticeSer.showToast('ERROR:' + err); //错误:无法使用拍照功能!
    });
  }

  // 打开手机相册
  private openImgPicker() {
    let temp = '';
    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); //错误:无法从手机相册中选择图片!
      });

    /*let str = '{"status":1,"msg":"提示:图片上传成功!","data":"http:\/\/192.168.1.20\/image\/580af6bcc4d40580af6bcc4d45.jpg"}';
    let res = JSON.parse(str);
    this.upload.success(res);*/
  }



  // 上传图片
  private uploadImg(path: string) {
    if(!path) {
      return;
    }

    this.fileTransfer = new Transfer();

    let options: any;
    options = {
      fileKey: this.upload.fileKey,
      headers: this.upload.headers,
      params: this.upload.params
    };
    this.fileTransfer.upload(path, this.upload.url, 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();
    }
  }
}

  注:这里自定义了一个NoticeService服务,主要用于统一toast的显示。如下:

/**
 * Created by Administrator on 2016/10/10 0010.
 */
import { Injectable }     from '@angular/core';
import { ToastController } from 'ionic-angular';

@Injectable()
export class NoticeService {
  static TOAST_POS_BOTTOM: string = 'bottom';
  static TOAST_POS_MIDDLE: string = 'middle';

  constructor(private toastCtrl: ToastController) {
  }

  // 显示 toast提示
  showToast(message: string, position: string = NoticeService.TOAST_POS_BOTTOM) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: 1500,
      position: position
    });
    toast.present();

    return toast;
  }

  /*showNoticeByToast(code: Number, msg: string) {
    let m = '';
    if(code == 1) {
      m = '提示:' + msg + '!';
    } else {
      m = '错误' + code + ':' + msg + '!';
    }

    return this.showToast(m);
  }*/

  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);
  }
}

ImgService服务的使用

  使用ImgService服务,需要在对应的Page页面中的构造方法中进行注入。如:

constructor(private notiSer: NotiService,
              private imgSer: ImgService) {
              }

  使用ImgService服务,需要我们先进行初始化,如:

// 初始化上传图片的服务
  private initImgSer() {
    this.imgSer.upload.url = ''; // 上传图片的url,如果同默认配置的url一致,那无须再设置
    this.imgSer.upload.success = (data) => {
      //上传成功后的回调处理
    };
    this.imgSer.upload.error = (err) => {
      this.noticeSer.showToast('错误:头像上传失败!');
    };
  }

  正式使用:

this.initImgSer();
this.imgSer.showPicActionSheet();

示例效果

  钱柜娱乐开户显示效果如下:
ImgService服务的使用

相册选择器的汉化

  在打开相册选择器的过程中,我们可能会发现其相册选择器的“取消”或“确定”按钮是英文显示的。但是BOSS可能会要求我们修改为中文,这时又要伤一下脑筋咯。
  解决(针对Anroid来说,ios应该也是一样滴):在项目的plugins目录下找到com.synconset.imagepicker文件夹,进入src/钱柜娱乐开户/Library/res目录,创建values-zh文件夹,在values-zh文件夹中创建multiimagechooser_strings_zh.xml文件,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="multi_app_name">图片选择器</string>
    <string name="free_version_label">免费版本 - 剩余图片: %d</string>
    <string name="error_database">打开相册出现错误.</string>
    <string name="requesting_thumbnails">请稍后...</string>
    <string name="processing_images_header">图像选择</string>
    <string name="processing_images_message">这可能是一个短暂的瞬间的时间.</string>
    <string name="maximum_selection_count_error_header">Auswahllimit erreicht</string>
    <string name="maximum_selection_count_error_message">Sie können maximal %d Bilder auf einmal auswählen.</string>
    <string name="discard">取消</string>
    <string name="done">确定</string>
</resources>

  修改plugins/com.synconset.imagepicker/plugin.xml文件,找到钱柜娱乐开户区域,增加如下语句:

<source-file src="src/钱柜娱乐开户/Library/res/values-zh/multiimagechooser_strings_zh.xml" target-dir="res/values-zh"/>

  删除项目platforms文件夹下的钱柜娱乐开户平台,重新添加平台打包运行即可。

参考

ionic使用ImagePicker插件中文显示

版权声明:本文为博主原创文章,未经博主允许不得转载。

ionic本地相册、拍照、裁剪、上传(单图完全版)

网络上已有的ionic图片选择上传博客碎片化过于严重,功能残缺或者引入了一些不必要的插件。这次以项目为契机,把ionic的图片选择、裁剪、上传整合一下,下一篇博客会分享ionic的多图上传,分享给大家...
  • u013007703
  • u013007703
  • 2016年11月17日 10:13
  • 2991

ionic2 --拍照

1、安装ionic native插件  git地址:     https://github.com/apache/cordova-plugin-camera  $ ionic ...
  • baidu_34635864
  • baidu_34635864
  • 2017年09月25日 14:25
  • 117

ionic插件基础(三)——插件原理及cordova相机插件的使用

本文主要讲解了插件的原理和使用cordova封装好的插件的使用
  • Luo_xinran
  • Luo_xinran
  • 2016年08月09日 15:40
  • 6332

ionic2拍照和文件上传

ionic2 实现拍照,从相册选择图片,选择视频,文件上传,表单处理。 脚本使用typescript。 ionic2,camera,filetransfer...
  • zahngjialiang
  • zahngjialiang
  • 2017年01月20日 17:00
  • 8967

ionic2框架 图片选择与上传(支持ios,钱柜娱乐开户)

1所用到的插件 1)cordova-plugin-camera 安装地址和步骤http://ionicframework.com/docs/native/camera/ 2)ImagePicker...
  • jasonzds
  • jasonzds
  • 2017年05月05日 15:48
  • 3234

ionic开发——手机相机摄像头与相册的调用

首先 1. 添加插件$cordovaCamera. cordova plugin add cordova-plugin-camera2. 在controller中添加依赖. 3. 代码 $scope....
  • yu17310133443
  • yu17310133443
  • 2016年08月31日 19:24
  • 2770

Ionic项目中调用摄像头拍照

1、配置环境,配置调用摄像头所需要的插件ng-cordova。可以使用 bower 安装 ,也可以离线下载 后手动放到项目中去。      引入 js 文件时的顺序        script ...
  • yuxiaofan1245023886
  • yuxiaofan1245023886
  • 2016年08月19日 15:33
  • 4305

ionic开发之摄像头(camera)的调用

最近项目中遇到了需要调用摄像头的地方,之前一直没有弄好,因为真机运行出现了问题,今天真机运行解决了,使得我怕不急待想试验一下摄像头能否调取成功。 要在ionic中调用camera功能,分一下几...
  • jacoby_fire
  • jacoby_fire
  • 2016年11月29日 18:24
  • 3556

ionic2中选取相册图片并支持多附件上传的

最近在研究的ionic2,准备公司项目用该框架来写。近期在做多附件上传时遇到问题了,先简单的说下自己所遇到的具体问题和解决方案。另外强调下,由于web这块之前是一窍不通,经过一段时间的学习从最简单的h...
  • CuiShunJian
  • CuiShunJian
  • 2017年05月04日 14:16
  • 1748

ionic 图片上传Demo

ionic 图片上传Demo 第1步 安装插件 1.1安装cordovaCamera 说明:这个插件是用来拍照,或者说是打开手机上面的照相机功能的 操作:打开DOS,进入ionic项目所在的目...
  • haozhoupan
  • haozhoupan
  • 2015年11月13日 10:52
  • 4578
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ionic2中的相册选择和拍照上传——ImgService
举报原因:
原因补充:

(最多只允许输入30个字)