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

目录

前言

　　在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();

示例效果

　　Android显示效果如下：

相册选择器的汉化

　　在打开相册选择器的过程中，我们可能会发现其相册选择器的“取消”或“确定”按钮是英文显示的。但是BOSS可能会要求我们修改为中文，这时又要伤一下脑筋咯。
　　解决（针对Anroid来说，ios应该也是一样滴）：在项目的plugins目录下找到com.synconset.imagepicker文件夹，进入src/android/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文件，找到android区域，增加如下语句：

<source-file src="src/android/Library/res/values-zh/multiimagechooser_strings_zh.xml" target-dir="res/values-zh"/>

　　删除项目platforms文件夹下的android平台，重新添加平台打包运行即可。

参考

ionic使用ImagePicker插件中文显示