文档章节

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

java_speed
 java_speed
发布于 2015/07/03 17:51
字数 367
阅读 8357
收藏 9

简单的项目开始:

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
上传头像选择本地相册后,相册无图片点击相机拍照返回系统崩掉

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

心碎到心死
2013/11/06
217
0
Ionic3项目实战

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

bestvist
2017/11/02
0
0
阿里巴巴达摩院图像搜索正式商业化,百亿级海量数据检索能力颠覆多媒体搜索领域

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

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

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

龙马行空
2015/08/12
0
8

没有更多内容

加载失败,请刷新页面

加载更多

python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
5分钟前
0
1
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
12分钟前
8
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
41分钟前
1
0
我为什么用GO语言来做区块链?

Go语言现在常常被用来做去中心化系统(decentralised system)。其他类型的公司也都把Go用在产品的核心模块中,并且它在网站开发中也占据了一席之地。 我们在决定做Karachain的时候,考量(b...

HiBlock
46分钟前
1
0
大数据学习脑图以及入门教程!

近些年,大数据的火热可谓是技术人都知道啊,很多人呢,也想学习大数据相关,所以,这里分享几个大数据脑图,希望可以让你清楚明白从哪里入门大数据,知道该学习以及掌握哪些知识点; 大数据...

董黎明
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部