文档章节

ionic 拍照、相册并上传至又拍云

java_speed
 java_speed
发布于 2015/07/03 17:51
字数 367
阅读 8254
收藏 9
点赞 1
评论 7

简单的项目开始:

ionic start camera-upload blank

添加平台

ionic platform add ios # 需要mac环境
ionic platform add android
添加必要的插件
MacBook:camera-upload jiang$ cat RAEDME.md
# 摄像头插件
ionic plugin add org.apache.cordova.camera

# 文件上传、下载插件(自动安装File插件)
ionic plugin add org.apache.cordova.file-transfer

# 相册
ionic plugin add https://github.com/wymsee/cordova-imagePicker.git

摄像头插件用法比较简单:

navigator.camera.getPicture(function(result) {
   q.resolve(result);
}, function(err) {
   q.reject(err);
}, options);
相册也是如此:
$cordovaImagePicker.getPictures(options).then(function(results) {
   var uri = results[0],
       name = uri;
   if (name.indexOf('/')) {
       var i = name.lastIndexOf('/');
       name = name.substring(i + 1);
   }

}, function(error) {
    alert(error);
});
文件上传:
var ft = new FileTransfer();
ft.upload(fileURL, '服务器地址', function(data) {
	// 响应数据
	var resp = JSON.parse(data.response);
}, function(error) {
	$ionicLoading.hide();
}, options);

由于存储采用Upyun,所以使用Upyun的Form-APi就可以直接上传至又拍云服务器。唯一需要先从某个服务器上获得又拍云的文件认证信息。这里采用jsonp实现:

/**
 * Upyun认证数据
 */
.factory('Upyun', function($http) {
	return {
		token: function(name, size) {
			return $http.jsonp("http://transfer.impress.pw/upyun?callback=JSON_CALLBACK", {
				cache: false
			});
		}
	}
})

最后打包成APP就可以直接运行。(注意:不要滥用文中提供的Upyun上传服务,否则我会关闭。)

项目地址:http://git.oschina.net/jiangdx/ionic-apps/tree/master/camera-upload

根据READMD.md来安装插件。

附上app截图:


© 著作权归作者所有

共有 人打赏支持
java_speed
粉丝 110
博文 44
码字总数 17031
作品 1
成都
程序员
加载中

评论(7)

职业_奶爸_304
职业_奶爸_304
请问服务器要如何处理文件上传呢?
java_speed
java_speed

引用来自“earl_herks”的评论

引入那两个文件也不行 提示『请在真机环境中使用拍照上传』
很久前的了,现在,ionic好多插件都换名字了。另外,公司已经废弃ionic项目,所以不会再跟进了。祝你们好运。
earl_herks
earl_herks
引入那两个文件也不行 提示『请在真机环境中使用拍照上传』
java_speed
java_speed

引用来自“Helloandroid”的评论

我这边一直提示:请在真机环境中使用拍照上传,应该是navigator.camera没就绪吧?我是按照你这个代码来做的,是怎么回事呢?插件名字我也换了,换成cordova-plugin-camera了,还是不对

if (!navigator.camera) {
alert('请在真机环境中使用拍照上传。')
return;
}
ng-cordova.js cordova.js index.html有没有引用这俩个js 文件
Helloandroid
Helloandroid
我这边一直提示:请在真机环境中使用拍照上传,应该是navigator.camera没就绪吧?我是按照你这个代码来做的,是怎么回事呢?插件名字我也换了,换成cordova-plugin-camera了,还是不对

if (!navigator.camera) {
alert('请在真机环境中使用拍照上传。')
return;
}
java_speed
java_speed

引用来自“小微薇”的评论

下载运行,好像无法拍照,因为用的ionic run android 也没有看见错误信息!
可能那个camera插件你没安装成功。最新ionic把好多插件都换名称了
小微薇
下载运行,好像无法拍照,因为用的ionic run android 也没有看见错误信息!
ionic开发之用户头像修改-图片选择与上传

用户头像修改,图片选择上传,非常常用的功能,本来打算和wap版一样,也用XMLHttpRequest和FormData来处理图片异步上传,结果在手机上测试的时候发现,onload事件没有触发,没找到原因,本来...

keller.zhou
2016/09/28
0
0
Ionic3项目实战

image 记录一些使用ionic3开发项目实战经验和功能解决方案。 原文链接 目录结构 Ionic应用是混合式开发的单页面应用,在开发之初要考虑到页面的切换和业务流程,以页面流定义项目层级关系会导...

bestvist
2017/11/02
0
0
上传头像选择本地相册后,相册无图片点击相机拍照返回系统崩掉

最近做了个上传头像到服务器的项目,当我选择本地相册时,如果本地相册没有图片,而直接在这里面点击相机拍照,拍完后返回时系统崩掉,有没有高手遇到过这种情况啊,本人急求帮助,在此先谢啦...

心碎到心死
2013/11/06
217
0
阿里巴巴达摩院图像搜索正式商业化,百亿级海量数据检索能力颠覆多媒体搜索领域

图像搜索对外宣传的问答: 1)目前阿里巴巴达摩院的图像搜索支持哪些功能? 商品图片搜索:通过输入商品图片,可以在商品库中准确地找到图片中商品的同款或者相似款,返回对应的商品信息。 ...

安永
07/12
0
0
Ionic系列——调用摄像头拍照和选择图库照片功能的实现

1、需求描述 最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传。 2、准备 ①、添加插件$cordovaCamera cordova plugin add cordova-plugin-came...

龙马行空
2015/08/12
0
8
API一键搭建智能时光相册,记录你的美

智能云相册是干什么用的? 智能云相册是阿里云专为影像类应用服务产品。是基于AliOS云相册成长起来的服务,根据历史数据经验,它可以支撑用户管理十亿级别的照片数量、PB级别的照片存储能力。...

仙游
02/09
0
0
网易云信自定义--JGChat

网易云信自定义,想干嘛就干嘛,妈妈再也不用担心我的学习了 网易云信的主要类和协议: NIMSDK :整个SDK的主入口,单例,主要提供初始化,注册,内部管理类管理的功能。 NIMLoginManager:登录...

小菜一碟ios
2017/05/13
480
1
阿里云推出全球首个影像类应用一站式解决方案:智能云相册

摘要:智能云相册(Cloud Photos)是阿里云为影像类应用提供的一站式解决方案,能够提供影像文件存储、管理等基础功能,还支持对影像内容进行分类打标、面孔识别等智能分析,并提供基于自然语...

阿里云云栖社区
2017/11/28
0
0
ionic框架安装

ionic框架安装 导语 ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox...

90后爱国
2016/07/05
67
0
【创意源码】几个创意源码作品分享

1、云相册(作者:Steven) 该项目是一款基于人脸识别注册和登录,并支持分享的云相册。登陆模块采用了两种登陆方式,一种是基于Face++的人脸识别登陆,另一种方式是基于Bmob数据库的账号密码...

牵着蜗牛去西藏
2014/11/27
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(五)- 文字排版样式和效果

CoreText进阶(五)- 文字排版样式和效果 效果 以下是三个设置了不同属性的效果图 第一个设置了文字颜色为红色,字体为16号 第二个设置了文字颜色为灰色,字体为16号,对其为居中 第三个设置...

aron1992
16分钟前
1
0
10.23 linux任务计划cron~10.27 target介绍

crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查是...

洗香香
26分钟前
0
0
告警系统主脚本、告警系统配置文件、告警系统监控项目

20.20 告警系统主脚本 告警系统主脚本 main.sh内容 #!/bin/bash#Written by aming.# 是否发送邮件的开关export send=1# 过滤ip地址export addr=`/sbin/ifconfig |grep -A1 "en...

lyy549745
30分钟前
0
0
Don’t Repeat Yourself

在软件工程中,Don’t Repeat Yourself(DRY)是软件开发的原则,旨在减少重复,用抽象代替它,使用数据规范化来避免冗余。 这个原则在维基百科上是说是由Andy Hunt和Dave Thomas《The Pragmat...

woshixin
31分钟前
0
0
搭建webpack项目框架

作者:汪娇娇 时间:2018年6月4日 一、说明 随着业务发展和前端人员的增加,搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面,一开始好像就没考虑其他框架,直接选了webpack。w...

娇娇jojojo
39分钟前
0
0
Java基础——面向对象(内部类)

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 内部类: 1.有名内部类 2.无名内部类 内部类申请...

凯哥学堂
47分钟前
0
0
HttpClient内部三个超时时间的区别

RequestConfig requestConfig = RequestConfig.custom() .setConnectionRequestTimeout(config.connReqTimeout) //从连接池中获取连接的超时时间 ......

1713716445
56分钟前
0
0
每天一个命令SCP

每天一个命令:SCP scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的。可能会稍微影响一下速...

河图再现
今天
0
0
cron/chkconfig/systemd/unit/target

linux任务计划 : cron工具 任务计划在运维工作中用到的比较多,大部分系统管理工作都是通过定期自动执行某个脚本来完成。 查看linux中任务计划的配置文件: /etc/crontab [root@yolks-001 ~]...

Hi_Yolks
今天
1
0
ftp攻略

Vsftpd完全攻略(一)ftp原理与vsftp安装:https://www.iyunv.com/thread-44698-1-1.html Vsftpd完全攻略(二)设置匿名用户也支持下载和上传与创建目录:https://www.iyunv.com/forum.php?mo...

寰宇01
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部