博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ionic 拍照、相册并上传至又拍云
阅读量:7118 次
发布时间:2019-06-28

本文共 1331 字,大约阅读时间需要 4 分钟。

hot3.png

简单的项目开始:

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上传服务,否则我会关闭。)

项目地址:

根据READMD.md来安装插件。

附上app截图:

转载于:https://my.oschina.net/twinkling/blog/474297

你可能感兴趣的文章
第四章:语言模块
查看>>
Flex 中的 DataGrid 自动刷新(转)
查看>>
npm 模块化方式接入 font-awsome
查看>>
Android WebView
查看>>
JQ选择器总结
查看>>
js生成条形码——JsBarcode
查看>>
日常碎碎念
查看>>
将Chrome中的缓存数据移出C盘
查看>>
poj 1995 快速幂(裸)
查看>>
spine动画融合与动画叠加
查看>>
[Python]有关pygame库中的flip和update的区别
查看>>
测试基础之等价类
查看>>
(十八)Centos之firewall 防火墙命令
查看>>
(一)深入java虚拟机之内存溢出与分析
查看>>
流程控制 - PHP手册笔记
查看>>
nginx 配置技巧
查看>>
linux下后台启动springboot项目
查看>>
Python自动化运维之1、Python入门
查看>>
RH124 Chapter 3 Getting Help in Red Hat Enterprise Linux
查看>>
腾讯要求
查看>>