apicloud apicloud

注册
查看: 9039|回复: 18

[新手教程] apicloud多图快速上传方案流程解析

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[新手教程] apicloud多图快速上传方案流程解析

 
9039 18 | 发表于 2015-4-28 14:53:54 |阅读模式 | |
本帖最后由 流浪男 于 2015-4-30 00:05 编辑

apicloud开发APP时,有时我们会开发用户多图上传的功能。毕竟是移动端要解决网速慢的问题,如何给用户带来好的体验让用户能够快速上传发布并能浏览就成为一个难题,下面我们分析一个解决解决方案思路。注意只是个思路思路,代码并不严谨。大家可以参考来做深入开发。


大体的意思就是写写入本地数据库,让用户在第一时间觉得已发布完成,然后在后台静默处理数据。
流程代码分析:
使用mediaScanner模块来完成图片多选
var photoList = api.require('mediaScanner');
photoList.open({
navigation:{
bg:'#17b4eb',
state: {
title: "*",
color: "#ffffff",
size: 18
},
cancel:{
title: "取消",
titleColor: "#ffffff",
titleSize: 18,
bg: "#17b4eb"
},
finish: {
title: "完成",
titleColor: "#ffffff",
titleSize: 18,
bg: "#17b4eb"
}
}
},function(ret, err){
var photos = ret.list;
var list = ret.list;
api.toast({
msg: '正在加载图片',
duration:1000,
location: 'top'
});
for(var idx in list){
var item = list[idx];
$("#report").append('<span><img class="photos" src="'+item.url+'" width="120"></span>');
}
});

点击发布后将数据写入本地数据库  db 模块
var db = api.require(‘db’);
这里要创建一个数据库和表,并确认数据库位置。
注意:下面我在写入的时候并没有采用表id递增的形式,我是根据写入时间进行的判断,大家在制作表和写入数据时记得弄个时间字段,因为js时间是精确到毫秒的,所以不需要考虑重复问题
var db = api.require('db');
db.openDatabase({
name: '数据库名称',
path: 'fs://表名.db'
}, function(ret, err){
if(ret.status){
//var sql = "drop table dynamic";
var sql = '创建表的语句';
db.executeSql({
name: 'qinghuwai',
sql: sql
}, function(ret, err){
if(ret.status){
insertDb();//创建成功后执行写入函数
}else{
api.toast({
msg: '发布失败',
duration:2000,
location: 'top'
});
}
});
}else{
api.toast({
msg: '发布失败',
duration:2000,
location: 'top'
});
}
})

数据的写入同样是 db 模块
var db = api.require('db');
db.openDatabase({
name: '数据库',
path: 'fs://表名.db'
}, function(ret, err){
if(ret.status){
var sql = '写入数据库语句';
db.selectSql({
name:'qinghuwai',
sql: sql
}, function(ret, err){
if(ret.status){
//触发动态同步事件
api.sendEvent({
name: 'eventName',
extra:{status:'true'}
});
api.toast({
msg: '发布成功,正在与服务器同步,稍等片刻',
duration:2000,
location: 'top'
});
setTimeout(function() {
api.closeWin();
},2000);
}else{
api.toast({
msg: '发布失败',
duration:2000,
location: 'top'
});
};
});
}else{
api.toast({
msg: '发布失败',
duration:2000,
location: 'top'
});
}
});

注意一点,上面上个触发同步事件,我们需要在一个全局的页面来监听这个事件,一般在你的app首页 index
监听页面的处理
apiready = function () {

//接收监听事件

api.addEventListener({
name: 'eventName'
}, function(ret){
if(ret){
var value = ret.value;
if(value.status=='true'){
synchro();//一个同步到服务器的处理函数,在下面
}
}
});


处理本地数据图片及同步到服务器
第一步先查要查询数据库判断是否有数据没有同步
同样还是db模块,怎样查询就不多作介绍了,多去看下文档,查询跟写入数据库流程基本是一样的
如果发现有数据,开始执行上传到数据库,ajax的post了,这个就比较简单了吧,后面的我就只挑重点了
发送到服务器的时候因为本地的图片会比较大,现在用手机拍的照片怎么也得有个1M 2M的,直接上传会比较慢,这里就可以利用H5的canvas来处理下图片了
在你的body中加个标签  <canvas></canvas>
随便找个位置放上,不会影响你的任何界面
post基本数据到服务器成功后返回一个服务器端数据的ID回来,我们开始来处理本地图片,压缩–上传—根据返回ID更新服务器端数据–全部处理完成后删除本地数据,这里我没有做深入开发,如果想深入的话就要加上断点续传之类的了
data就上一步查询到的数据,写成json数组上传
var db = api.require('db');
$.post(URL,data,function(datas){
if(datas.status=='succ'){
//alert(datas.status);
if(datas.isPhotos=='true'){
//处理图片
var count = 0;
for(var i in datas.photos){
var img = new Image();
img.src = datas.photos;//图片路径
img.onload = function () {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = 720 || w;//图片压缩比例
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({width : w, height : h});
ctx.drawImage(that, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg', 1 || 0.6 );//转为base64
//return base64;
var upData = {
dynamicid: datas.id,
listorder:count,
base64: base64
}
$.post(更新图片关联数据ID的处理URL,upData,function(upDatas){},'json');
count++;

}

}

}

//完成后删除本地数据
db.openDatabase({
name: '数据库',
path: 'fs://表名.db'
}, function(ret, err){
if(ret.status){
//同步成功后将本地数据删除
var delSql = 根据时间的删除的语句;
db.executeSql({
name: '数据库',
sql: delSql
}, function(ret, err){
if(ret.status){
synchroOn = true;
}
});
}
});

}
},'json')





本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

新手上路

UID:10484

主题:
30
帖子:
92
云币:
175
发表于 2015-4-29 23:42:23 来自手机 |
思路很赞,代码没细看

驾校小白

UID:13175

主题:
2
帖子:
12
云币:
28
发表于 2015-4-28 15:29:52 |
比较 想知道 你这 多图选择 可以 正常运行吗?  至于  慢慢 同步数据 到 服务器 问题,,假如网络不是很好  正在同步 , 用户 突然 退出了程序,同步就断了

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

 楼主| 发表于 2015-4-28 15:37:46 |
蛋派 发表于 2015-4-28 15:29
比较 想知道 你这 多图选择 可以 正常运行吗?  至于  慢慢 同步数据 到 服务器 问题,,假如网络不是很好  ...

正常的,用户突然退出了APP,这个就需有弄断点续传了,还有就是可以有一个判断,第一,本地数据是等图片全部传完后再删除的,第二,服务器数据图片的url上传成功的图片地址是不一样的。可以根据这两点判断是哪一张图片没有上传然后继续。最直接的方法就是提示用户后台正在与服务器同步数据,请勿关闭APP。
传统的办法如果一个用户要传20张图片的话,那他估计就得在这个页面停留上一段时间了,什么事都做不了

主题:
1077
帖子:
4833
云币:
2147218643

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-4-29 23:58:18 |
为何这么厉害!

驾校小白

UID:83344

主题:
2
帖子:
12
云币:
19
发表于 2015-5-17 15:53:37 |
请问高手
在哪了上传图片和修改文字这些的啊》?

主题:
2
帖子:
15
云币:
24
发表于 2015-6-7 09:57:28 |
这个思路很不错,先存储在本地,再上传。现在的手机拍摄的相片都很大,有没有对图片进行预压缩处理的,然后再保存在本地,慢慢上传的。

新手上路

UID:36332

主题:
27
帖子:
92
云币:
206
发表于 2015-6-8 09:45:59 |
断点续传。。。。。

主题:
0
帖子:
23
云币:
89
发表于 2015-8-7 16:04:32 |
下面开始探讨怎么样做断点续传了

驾校小白

UID:128892

主题:
0
帖子:
1
云币:
3
发表于 2015-9-10 10:31:09 |
感谢群主分享
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表