【整理whh-原文地址】
背景介绍
- 使用JS将APP(包括安卓和IOS)上传到七牛 (上传APP所以不考虑数据处理)
- uptoken使用JAVA后台得到
- 七牛上传基于plupload下面不详述如何使用参见
- 七牛上传的简单案例也不详述,参见官网事例很清楚了。就是参数一定看仔细!
- 清除缓存问题
- IOS APP上传icon和ipa自动生成plist
-
- 补充:限制选择文件类型;打开多个选择文件窗口
踩过的坑
uptoken获得失败
1.使用前端获取:
本人是个前端,在后台还没给出获取uptoken接口时,我先选择了使用JS(uptoken_func参数)获取进行测试,代码如下:详细参见
// uptoken_func: function (file) { // 在需要获取uptoken时,该方法会被调用
/**
* 上传凭证算法实现参考
* 请注意External Resources项中引用的第三方CryptoJS库
*/
var genUpToken = function(accessKey, secretKey, putPolicy) {
//SETP 2
var put_policy = JSON.stringify(putPolicy);
//SETP 3
var encoded = base64encode(utf16to8(put_policy));
//SETP 4
var hash = CryptoJS.HmacSHA1(encoded, secretKey);
var encoded_signed = hash.toString(CryptoJS.enc.Base64);
//SETP 5
var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
console && console.log("upload_token=", upload_token)
return upload_token;
// }
费了半天劲,又是引入CryptoJS,又是加入utf16to8等等方法,最后还是失败了,生成了一个uptoken我用来上传文件上传失败,就问七牛工单,他说uptoken过时或者错误,这就没法搞了也不知道为什么错,就在没有头绪的时候后台接口好了,得,用后台接口,结束!(有童鞋用JS获取了uptoken的可以来交流)
不过在错误中学习到了uptoken的第三个值(用“:”分割的aaaa:aaaa:aaaa)可以通过base64解码得到上传策略。
2.使用后台获取(我选择的是java)
导入gson-1.6.jar和qiniu-java-sdk-7.0.0.jar,以下是qiniu的方法!是用uptoken,传入需要的参数既可以获得,本人不做后台开发就不详述,就是一定注意参数不要传错了,我们搞了好久AK,SK复制错了,如果提示uptoken错误多检查几遍参数。到此完成了一个最简单的上传。图片描述
4M以上大文件上传失败
奇葩一样的大坑啊,本来就是刚刚上手qiniu还没搞懂的时候还在郁闷昨天还好好的怎么过了一晚就上传失败了,查询资料,全不费功夫社区有人踩过了。看第二个评论,简单说就是设置uptoken参数不能上传大文件,必须设置uptoken_url才行,作者说的第一个方法我进不去,就没有纠结。这个是qiniu的bug!
你直接看源码就知道它在判断需要分块的时候,js-sdk内部设置up.setOption的调用getUptoken(),that.tokenInfo在只填写token的时候,还是undefined,所以就出问题了。
因为tokenInfo是在走getNewUpToken()设置的,而getNewUpToken是走填了url才会执行的函数。
覆盖已有文件
刚刚拿到需求,思索一番,
- 方案一:生成一个可用覆盖文件的uptoken;
- 方案二:qiniuJSjdk通过配置参数可以覆盖文件。
查阅API,社区资料,发现方案一可以行的通,只需后台uptoken方法时传入key参数即可覆盖服务器上面的key文件。
我原以为key也是后台给设定的存储文件名,(这个key并不是服务器存储的最终文件名)后来才发现不是,详细看scope参数。
指定上传的目标资源空间 Bucket 和资源键 Key(key的长度最大为750字节)。有两种格式:
●,表示允许用户上传文件到指定的 bucket。在这种格式下文件只能新增,若已存在同名资源上传则会失败。
●:,表示只允许用户上传指定 key的文件。在这种格式下文件默认允许修改,若已存在同名资源则会被覆盖。如果只希望上传指定 key 的文件,并且不允许修改,那么可以将下面的insertOnly 属性值设为 1。
由于后台需要key,所以前台在uptoken_url时传参,例如:’/appstore/app/qiniuUploadToken?params=a.png’。
关于文件名
前台有三个参数和文件名有关:
// unique_names: true, // 默认false,key为文件名。若开启该选项,JS-SDK会为每个文件自动生成key(文件名)
// save_key: true, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key,则开启,SDK在前端将不对key进行任何处理
'Key': function (up, file) {
// 若想在前端对每个文件的key进行个性化处理,可以配置该函数
// 该配置必须要在unique_names: false,save_key: false时才生效
var key = file.name;//**错误**
// do something with key here
return key
}
重点看第三个参数,当时没有在意就这样写的,所以认为给后台传的key就是服务器存储的文件名,其实不然,是我在JS key中设置了var key = file.name。应该需要前端定一个名字,而不是文件原名。
清除缓存问题
看官方文档给出如下解决方法,生成管理token,清除缓存。
但是客服给出了更好的解决方案
一、URL 问号传参刷新:
二、在七牛云存储上刷新: 1、登录portal.qiniu.com 2、工具刷新 3、API 接口文档刷新:
三、只使用fusion cdn加速,且没有使用七牛存储
我选择了最简单的第一种,URL 问号传参。(抛出问题:ios app是ipa url问号传参,还是plisturl问号传参,还是都需要,待测试验证,之后更新!)
例如,如果 http://7xt44n.com2.z0.glb.qiniucdn.com/qiniu-picture5.jpg
这个图片资源没有更新, 可以在该 URL 后面加上参数的形式来让 CDN
强制刷新:http://7xt44n.com2.z0.glb.qiniucdn.com/qiniu-picture5.jpg?v=20130910,CDN
拿到这个 URL 后会强制回七牛的存储中取回最新的资源。原理: (用户创建空间为普通平台,在这个平台下 url 是完整缓存的。也就是说。如果你带了? 1234 这样的查询参数在文件 url
后面,就变成了不同的 url,所以不会命中 cdn 的缓存。会去原站七牛拉资源,这时候拉取到的资源就变成了覆盖更新后的资源了。)
IOS APP上传icon和ipa自动生成plist
原先的ios部署非常不方便,需要上传icon和ipa得到地址后修改plist,再上传plist。所以就想能不能做到自动。
还是喜欢先查阅资料看看网上有没有方案,一无所获。
方案如下:(以下代码感谢导师的支持)
- 使用Arttemplate得到一个模板
- 使用blob得到一个blob数据用于生成file对象
使用七牛的表单上传,结合XMLHttpRequest,formData得到一个表单数据
详细代码:function plist(icon57Url, icon512Url, ipaUrl, key,plistUrl) {
var data = {
icon57Url: icon57Url,
icon512Url: icon512Url,
ipaUrl: ipaUrl,
};
var html = template(‘test’, data);
var blob = new Blob([html], {type: “text/plain”});
//document.getElementById(‘content’).innerHTML = html;
var Qiniu_UploadUrl = “http://up.qiniu.com“;
var Qiniu_upload = function (f, token) {
var xhr = new XMLHttpRequest();
xhr.open(‘POST’, Qiniu_UploadUrl, true);
var formData, startDate;
formData = new FormData();
//if (key !== null && key !== undefined) formData.append(‘key’, key);
formData.append(‘token’, token);
formData.append(‘name’, key + ‘.plist’);
formData.append(‘chunk’, 0);
formData.append(‘chunks’, 1);
formData.append(‘key’, key + ‘.plist’);
formData.append(‘file’, f, key + ‘.plist’);
var taking;
xhr.upload.addEventListener(“loadstart”, function (up, file) {
/*up.settings.multipart_params = {
filename : “xucheng.docx”
};*/
}, false);
xhr.upload.addEventListener(“progress”, function (evt) {
if (evt.lengthComputable) {
/*var nowDate = new Date().getTime();
taking = nowDate - startDate;
var x = (evt.loaded) / 1024;
var y = taking / 1000;
var uploadSpeed = (x / y);
var formatSpeed;
if (uploadSpeed > 1024) {
formatSpeed = (uploadSpeed / 1024).toFixed(2) + “Mb\/s”;
} else {
formatSpeed = uploadSpeed.toFixed(2) + “Kb\/s”;
}*/
//var percentComplete = Math.round(evt.loaded * 100 / evt.total);
//progressbar.progressbar(“value”, percentComplete);
// console && console.log(percentComplete, “,”, formatSpeed);
}
}, false);xhr.onreadystatechange = function (response) { if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") { var blkRet = JSON.parse(xhr.responseText); Compost('/appstore/app/updateOneProperty',{'id':datascope.appid,'ios_url':plistUrl},function () { $('#ios_url').textbox('setText', plistUrl); }) console.log("plist上传成功") } else if (xhr.status != 200 && xhr.responseText) { } }; startDate = new Date().getTime(); $("#progressbar").show(); xhr.send(formData); }; /*var reader = new window.FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { var base64data = reader.result; console.log(base64data); }*/ $.ajax({ type: "get", url: "/appstore/app/qiniuUploadToken?params=" + key + ".plist", async: true, dataType: "json", success: function (data) { var token = data.uptoken; console.log(token); Qiniu_upload(blob, token); } });
}
到此最重要的一步自动上传plist完成!,以此共同学习。
补充
限制选择文件类型
plupload插件支持,ipa和apk都是zip类型,所以title是Zip files
filters: {
mime_types: [
{title: “Image files”, extensions: “png”}, //限定png后缀上传
{title: “Zip files”, extensions: “ipa”}, //限定ipa后缀上传
{title: “Zip files”, extensions: “apk”}, //限定apk后缀上传
]
},
打开多个选择文件窗口
每次实例化option方法时会( browse_button: *// 上传选择的点选按钮,必需)给按钮绑定一个点击事件,所以之后会点击打开多次选择文件窗口。
尝试解决方案(失败):销毁option对象,销毁对象绑定的事件不会删除
销毁绑定事件,由于没有事件名称所以无法删除
尝试解决方案(成功):
if (uploader) {uploader.disableBrowse(true);}