ionic 拍照、相册并上传至又拍云
ionic 拍照、相册并上传至又拍云
java_speed 发表于3年前
ionic 拍照、相册并上传至又拍云
  • 发表于 3年前
  • 阅读 8140
  • 收藏 9
  • 点赞 1
  • 评论 7

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: ionic官方有介绍怎么拍照,也有介绍文件上传。但相册没怎么介绍。像上传公有云上一般都是国外的云存储,本文介绍一下怎么上传至又拍云

简单的项目开始:

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截图:


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 109
博文 44
码字总数 17031
作品 1
评论 (7)
小微薇
下载运行,好像无法拍照,因为用的ionic run android 也没有看见错误信息!
java_speed

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

下载运行,好像无法拍照,因为用的ionic run android 也没有看见错误信息!
可能那个camera插件你没安装成功。最新ionic把好多插件都换名称了
Helloandroid
我这边一直提示:请在真机环境中使用拍照上传,应该是navigator.camera没就绪吧?我是按照你这个代码来做的,是怎么回事呢?插件名字我也换了,换成cordova-plugin-camera了,还是不对

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

引用来自“Helloandroid”的评论

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

if (!navigator.camera) {
alert('请在真机环境中使用拍照上传。')
return;
}
ng-cordova.js cordova.js index.html有没有引用这俩个js 文件
earl_herks
引入那两个文件也不行 提示『请在真机环境中使用拍照上传』
java_speed

引用来自“earl_herks”的评论

引入那两个文件也不行 提示『请在真机环境中使用拍照上传』
很久前的了,现在,ionic好多插件都换名字了。另外,公司已经废弃ionic项目,所以不会再跟进了。祝你们好运。
职业_奶爸_304
请问服务器要如何处理文件上传呢?
×
java_speed
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: