angular+ionic 选择手机图库,调用相机，上传图片 - 简书
angular+ionic 选择手机图库,调用相机，上传图片
1.安装插件 cordova-plugin-image-picker；cordova-plugin-camera；cordova-plugin-file；2.注入 $cordovaImagePicker；3.相册选择函数function sheetImg() {var options = {maximumImagesCount: 10, //最大选择图片数量width: 800, //筛选宽度：如果宽度为0，返回所有尺寸的图片height: 800, //筛选高度：如果高度为0，返回所有尺寸的图片quality: 80 //图像质量的大小，默认为100};$cordovaImagePicker.getPictures(options).then(function (results) {for (var i = 0; i & results. i++) {//alert('Image URI: ' + results[i]);$scope.img_src.push(results[i]);}},function(error) {});}；4.相机拍照函数function onDeviceReady() {var options = {//相机配置//这些参数可能要配合着使用，比如选择了sourcetype是0， //destinationtype要相应的设置quality: 80, //相片质量0-100destinationType: Camera.DestinationType.FILE_URI, //返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)sourceType: Camera.PictureSourceType.CAMERA, //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库allowEdit: false, //在选择之前允许修改截图encodingType: Camera.EncodingType.JPEG, //保存的图片格式： JPEG = 0, PNG = 1targetWidth: 200, //照片宽度targetHeight: 200, //照片高度mediaType: 0, //可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。cameraDirection: 0, //枪后摄像头类型：Back= 0,Front-facing = 1popoverOptions: CameraPopoverOptions,saveToPhotoAlbum: true}navigator.camera.getPicture(function(res){$scope.img_src.push(res);}, function(res){alert("选择失败");}, options);}5.图片上传upImage（图片路径）// imageUrl 为本地上传图片路径数组var upImage = function (imageUrl) {var img_arr = [];for (var i = 0; i & imageUrl. i++) {$ionicLoading.show({template: '上传中...'});document.addEventListener('deviceready', function () {var url = "";var options = {};$cordovaFileTransfer.upload(url, imageUrl[i], options).then(function (result) {//alert(JSON.stringify(result));var res = eval('(' + result.response + ')');img_arr.push("" + res.data.savepath + res.data.savename);if (imageUrl.length == img_arr.length) { //上传成功submitDataFun(img_arr); //调用上传提交}}, function (err) {//alert(JSON.stringify(err));alert("fail");}, function (progress) {// constant progress updates});$ionicLoading.hide();}, false);}}ionic2拍照和文件上传 - CSDN博客
ionic2拍照和文件上传
一月之前，我都不知道ionic为何物。突然公司项目主管让我看看ionic，刚开始听到这个消息，非常高兴，终于不用死守一门技术了。结果鼓捣了一段时间，也就是搭建了个环境而已，demo的代码几乎一句都看不懂，在网上东抄抄，西抄抄，也就写了一个界面。这样肯定是不能满足公司的需求的。过了几天，项目主管直接让我用ionic2做一个demo进行演示，下面就是这个小demo。
写这篇博客的目的，一方面相当于自己的笔记，做个小总结，另一方面如果有需要实现该功能的，如果找不到更好的答案，可以看看这个。
1，需要实现的功能
简单的界面搭建
拍照，并上传到指定服务器
从相册选择图片并上传到指定的服务器
选择视频并上传
2，搭建界面
界面很简单，三个按钮，几个input表单，一张图片，一个提交的按钮。
因为我连基本得HTML都不怎么懂，所以搭建这个界面也废了一番力气。
下面是界面的代码：
class="action-sheets-basic-page"&
&铁路应急图像系统&
padding class="action-sheets-basic-page"&
ion-button style=" width: 31%;padding: 0px"
(click)="takePhoto()"&
ion-button style="width: 31%;padding: 0px" (click)="choosePhoto()"&
ion-button
style="width: 31%;padding: 0px" (click)="chooseVideo()"&
[formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate&
[class.error]="!tieluxian.valid && tieluxian.touched"&
&铁路线：&
type="text"
value="" [formControl]="tieluxian" clearInput=true&&
&铁路站：&
type="text" value="" [formControl]="tieluzhan" clearInput=true&&
&上报人：&
type="text" value="" [formControl]="shangbaoren" clearInput=true&&
&公里标：&
type="text" value="" [formControl]="gonglibiao" clearInput=true&&
&事件描述：&
type="text" value="" [formControl]="shijianmiaoshu" clearInput=true&&
style="text-align: " &
[src]="profilePicture" style="margin: 5border-radius: 5% ;max-width: 70%; max-height: 30%" /&
ion-button block color="secondary" type="submit" [disabled]="!loginForm.valid"&上传&
关于button平分宽度，宽度应该是每个33%，但是因为ionic2中的button貌似内置了margin之类的属性吧，button额外占用一定的宽度。
按钮的点击事件比较简单，一个click一个方法名。
比较复杂的是表单了，但是看看标签和后面的代码，就能知道怎么操作了，具体的属性我也不太懂。
3，导入cordova插件
用到的插件就三个，一个是关于拍照的，另两个是关于文件上传的。
在项目的根目录下，打开cmd指令，输入：
ionic plugin add cordova-plugin-file-transfer
这个指令实际会下载两个插件，一个插件是cordova-plugin-file，另一个插件是cordova-plugin-file-transfer。
安装camera插件的指令：
ionic plugin add cordova-plugin-camera
其实要是能通过其他方式获得这些文件，直接复制到plugins目录下也是可以的，有的时候下载会非常慢。
官网关于文件传输和照相机的文档：
ionic2使用typescript作为脚本，和javascript有一定的差别，所以最好多看看官方的文档，只有官方的文档才是最新的。
下载之后，需要用import导入需要用到的类
import { Camera } from 'ionic-native';
import { Transfer } from 'ionic-native';
import { FileUploadOptions } from 'ionic-native';
5，TypeScript代码
import { Component } from '@angular/core';
import { Platform, ActionSheetController } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import {NgZone} from 'angular2/core';
import { Camera } from 'ionic-native';
import { Transfer } from 'ionic-native';
import { FileUploadOptions } from 'ionic-native';
@Component({
templateUrl: 'basic.html'
export class BasicPage {
loginForm: FormG
tieluxian:
tieluzhan:
shangbaoren:
gonglibiao:
shijianmiaoshu:
profilePicture: any="assets/img/live.jpg";
constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
this.loginForm = formBuilder.group({
* 表单的操作，方括号里面的参数是对输入的要求
tieluxian: ['', pose([Validators.minLength(1),, Validators.required])],
tieluzhan: ['', pose([Validators.required, Validators.minLength(1)])],
shangbaoren: ['', pose([Validators.required, Validators.minLength(1)])],
gonglibiao: ['', pose([Validators.required, Validators.minLength(1)])],
shijianmiaoshu: ['', pose([Validators.required, Validators.minLength(1)])],
this.tieluxian = this.loginForm.controls['tieluxian'];
this.tieluzhan = this.loginForm.controls['tieluzhan'];
this.shangbaoren = this.loginForm.controls['shangbaoren'];
this.gonglibiao = this.loginForm.controls['gonglibiao'];
this.shijianmiaoshu = this.loginForm.controls['shijianmiaoshu'];
* 表达提交的方法名和html总标签中写得要一样，通过value，可以得表达里面输入的值
login(value) {
var tielu=value.
alert(tielu);
const fileTransfer = new Transfer();
* 上传文件时携带参数，这个是可选项。
var options:
options = {
fileKey: 'file',
fileName: 'name.jpg',
reporter:value.shangbaoren,
desc:value.shijianmiaoshu,
railwaybureau:"参数",
spot:"ok",
railwaystation:value.tieluzhan,
railwayline:"railwayline",
kmdesc:value.gonglibiao,
headers: {}
var reqUri = "http://10.28.0.210:8080/uploadCenter.jsp";
fileTransfer.upload(this.path, reqUri, options).then((data) =& {
alert("正在上传");
}, (err) =& {
alert("出错啦");
takePhoto() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
saveToPhotoAlbum:true,
sourceType:Camera.PictureSourceType.CAMERA,
correctOrientation: true
* imageData就是照片的路径，关于这个imageData还有一些细微的用法，可以参考官方的文档。
Camera.getPicture(options).then((imageData) =& {
let base64Image =
this.path = base64I
this.profilePicture=base64I
alert(this.path);
}, (err) =& {
alert( err.toString());
choosePhoto() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType:0,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true
Camera.getPicture(options).then((imageData) =& {
let base64Image =
this.path = base64I
this.profilePicture=base64I
alert(base64Image);
}, (err) =& {
chooseVideo() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType:0,
mediaType: 1,
allowEdit: true,
correctOrientation: true
Camera.getPicture(options).then((imageData) =& {
let base64Image =
this.path = base64I
this.profilePicture="assets/img/video.png";
alert(this.path);
}, (err) =& {
logForm() {
本文已收录于以下专栏：
相关文章推荐
Cordova准备
ImgService服务的实现
ImgService服务的使用
相册选择器的汉化
参考前言　　在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的...
最近在研究的ionic2，准备公司项目用该框架来写。近期在做多附件上传时遇到问题了，先简单的说下自己所遇到的具体问题和解决方案。另外强调下，由于web这块之前是一窍不通，经过一段时间的学习从最简单的h...
ionic文件操作
采用ionic开发hybrid app混合应用，自然少不了使用文件选择和上传操作，经过皓眸哥左看看，右瞅瞅，有两种可以实现的方法：
1.采用cordova插件，需要使用...
最近在用ionic开发项目，和原生交互用的ngcordova,项目需要用到拍照上传文件，一次性上传多张，不废话，上代码。
首先得调用摄像头进行拍照//使用拍照功能需要添加cordova plugin...
网络上已有的ionic图片选择上传博客碎片化过于严重，功能残缺或者引入了一些不必要的插件。这次以项目为契机，把ionic的图片选择、裁剪、上传整合一下，下一篇博客会分享ionic的多图上传，分享给大家...
/docs/plugins/touchID/
这里面可都是硬货；
添加ngcordova插件；/docs/i...
由于ionic框架是基于angularJS的，开发hybrid app混合应用的，但angularJS本身没有太多对移动设备硬件的支持，所以找到两种方法解决这个问题！
一，ngCordova插件：ng...
转载自：Angular 2 组件之间如何通信？
组件之间的共享可以有好几种方式
父-&子 input 方式
import {Component,Input} from 'angu...
1,添加Ionic providers            --命令    ionic g provider baseservice
-----baseservice.ts  添加代码
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Ionic系列——调用摄像头拍照和选择图库照片功能的实现
时间： 19:57:37
&&&& 阅读：5226
&&&& 评论：
&&&& 收藏：0
1、需求描述
&&&&最近要做一个功能就是调用摄像头拍照，然后上传照片的功能，或者直接打开图库选择照片然后上传。
&&&&①、添加插件$cordovaCamera
cordova&plugin&add&cordova-plugin-camera
&&&&②、在controller中添加依赖
3、代码实现
$scope.takePhoto=function(){
&&&&var&options&=&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//这些参数可能要配合着使用，比如选择了sourcetype是0，destinationtype要相应的设置
&&&&&&&&quality:&100,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//相片质量0-100
&&&&&&&&destinationType:&Camera.DestinationType.FILE_URI,&&&&&&&&//返回类型：DATA_URL=&0，返回作为&base64&編碼字串。&FILE_URI=1，返回影像档的&URI。NATIVE_URI=2，返回图像本机URI&(例如，資產庫)
&&&&&&&&sourceType:&Camera.PictureSourceType.CAMERA,&&&&&&&&&&&&&//从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
&&&&&&&&allowEdit:&false,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//在选择之前允许修改截图
&&&&&&&&encodingType:Camera.EncodingType.JPEG,&&&&&&&&&&&&&&&&&&&//保存的图片格式：&JPEG&=&0,&PNG&=&1
&&&&&&&&targetWidth:&200,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//照片宽度
&&&&&&&&targetHeight:&200,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//照片高度
&&&&&&&&mediaType:0,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。&視頻格式=1，允许选择视频，最终返回&FILE_URI。ALLMEDIA=&2，允许所有媒体类型的选择。
&&&&&&&&cameraDirection:0,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//枪后摄像头类型：Back=&0,Front-facing&=&1
&&&&&&&&popoverOptions:&CameraPopoverOptions,
&&&&&&&&saveToPhotoAlbum:&true&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//保存进手机相册
&&&&$cordovaCamera.getPicture(options).then(function(imageData)&{
&&&&&&&&CommonJs.AlertPopup(imageData);
&&&&&&&&var&image&=&document.getElementById(‘myImage‘);
&&&&&&&&image.src=imageD
&&&&&&&&//image.src&=&"data:image/base64,"&+&imageD
&&&&},&function(err)&{
&&&&&&&&//&error
&&&&&&&&CommonJs.AlertPopup(err.message);
4、几点说明
&&&&①如果要保存照片，需要设置destinationType是返回图像路径，然后设置saveToPhotoAlbum: true，这两个参数都设置才能保存照片，但是保存的照片质量很差。而且这个时候虽然设置allowEdit: true，但是返回来的是源文件的路径，这个功能等于没有用。
&&&&②如果要截取图片，要设置allowEdit: true，并且destinationType返回的是base64位编码字符串。
&&&&③当设置sourceType: Camera.PictureSourceType.CAMERA时，这个时候的选择图库的界面很难看，需要设置sourceType为0或者2这个时候调用的就是系统的图库，好看点。所以我们实现拍照，然后在拍照的成功回调中调用打开相册选择图片，效果会好一点。
&&&&④长和宽的设置只影响剪裁框的大小，也就是如果返回base64会影响图片的大小，返回uri不会影响。
&&&&⑤设置成png比jpg的效果还差。
&&&&⑥当我设置Camera.DestinationType.NATIVE_URI，剪裁的时候返回以前照的同一张照片，但是放在image标签中的照片是最新的。后来我发现是这个问题导致的encodingType:Camera.EncodingType.PNG。
&&& ⑦这句话别人说是清理缓存用的，具体实现没用过，以后再研究吧
&$cordovaCamera.cleanup().then(...);&//&only&for&FILE_URI
&&& ⑧之后我会完善博客内容，当选择上传的时候弹出一个actionsheet，里面有选择图库，拍照等选项。上传的话可以直接把base64编码字符串直接传到后台处理，也可以用angular的上传，也可以用cordova-tranfer.
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！【功能介绍】
在开发应用的时候，经常会遇到需要上传图片的功能，比如修改个人资料的头像。本文介绍的是基于ionic框架，在移动端上传图片的功能。
【功能流程】
（1）点击页面上的头像，弹出一个对话框，选择[拍照]或者[从相册选择]；
（2）选取/拍摄照片；
（3）上传照片；
【html核心代码】
&div ng-controller="myCtrl"&
&a ng-click="choosePicMenu()"&
&img ng-src="{{img}}"&
【myCtrl.js核心代码】
（1）选取图片的函数
//定义选择照片的函数，$scope.choosePicMenu = function() {
var type = 'gallery';
$ionicActionSheet.show({
buttons: [
{ text: '拍照' },
{ text: '从相册选择' }
titleText: '选择照片',
cancelText: '取消',
cancel: function() {
buttonClicked: function(index) {
if(index == 0){
type = 'camera';
}else if(index == 1){
type = 'gallery';
}　　　　　　　//Camera.getPicture(type)-&根据选择的&选取图片&的方式进行选取
Camera.getPicture(type).then(　　　　　　　　　 //返回一个imageURI，记录了照片的路径
function (imageURI) {
$scope.me.image = imageURI;　　　　　　　　　　　 //更新页面上的照片
$scope.img = imageURI;
$scope.$apply();
function (err) {
&（2）上传函数中的核心代码
//新建文件上传选项，并设置文件key，name，typevar options = new FileUploadOptions();options.fileKey="ffile";options.fileName=$scope.me.image.substr($scope.me.image.lastIndexOf('/')+1);options.mimeType="image/jpeg";//用params保存其他参数，例如昵称，年龄之类var params = {};params['name'] = $scope.me.//把params添加到options的params中options.params =//新建FileTransfer对象var ft = new FileTransfer();//上传文件ft.upload(
$scope.me.image,
encodeURI('some url'),//把图片及其他参数发送到这个URL，相当于一个请求，在后台接收图片及其他参数然后处理
uploadSuccess,
uploadError,
options);//upload成功的话function uploadSuccess(r) {
var resp = JSON.parse(r.response);
if(resp.status == 0){　　　　 //返回前一页面
$navHistory.back();
$ionicPopup.alert({
title: 'Message',
cssClass: 'alert-text',
'Upload fail!'
}}//upload失败的话function uploadError(error) {}
这里有一篇文章，使用ng-cordova的file transfer插件进行上传和下载-&
阅读(...) 评论()