七牛jssdk上传所遇到的问题
1.iOS点击不弹出拍照和图片按钮
七牛的qiniu.js根据提供的按钮id和父级id会创建隐藏的type为file的input
之所以iOS上不呼出上传图片的按钮，是因为没有触发到七牛创建的input，原因可能是被自己的按钮阻挡了事件,七牛会自己根据所提供标签的z-index层级然后降1级创建新标签 
解决: 自己主动触发七牛的js（虽然有点low）
// 在自己的按钮上增加点击触发函数
// 点击函数（不要等页面加载完再定义函数）
// 解决iOS点击不能触发上传事件
function clickqiniu(e){$(e).siblings("div").children("input").trigger("click");return false;
}
2.iOS上传的图片，在安卓手机上看旋转了90度
原因跟图片的EXIF信息有关系，可以再七牛图片链接后面加上?imageMogr2/auto-orient解决
这样可以根据原图EXIF信息自动旋正
3.图片裁剪
官方文档给的图片处理的代码 
看到这里我是想要骂人的，鬼知道这个东西要放在什么位置
经过我查看qiniu.js文件才明白上面的参数是什么意思
qiniu.js中imageMogr2的定义： 
可见这个函数有两个参数：第一个是对象类型的各种参数配置七牛详细参数、第二项是key值，key就是我们上传图片的名称
这里有一个问题： auto-orient 这个参数有 ‘-’ 会报错：
所以改成下图：
当然qiniu.js中也要修改:
我把处理图片的函数放在了完成上传图片之后，下面是我的代码：
// 七牛上传图片var uploader = Qiniu.uploader({runtimes: 'html5,flash,html4',browse_button: 'pickfiles',//上传按钮的IDcontainer: 'btn-uploader',//上传按钮的上级元素IDdrop_element: 'btn-uploader',max_file_size: '100mb',//最大文件限制flash_swf_url: '/mobile_static/js/Moxie.swf',dragdrop: false,chunk_size: '4mb',//分块大小uptoken_url: "/Person/getqiniu_upload_token",//设置请求qiniu-token的url
// uptoken : '3xKpCHDKrZEygn2ZTv73_dzB_3OQ4DQ3hBI0nc7b:UUdFvgVzQirBVGb_nKfcw4tMX8A=:eyJzY29wZSI6Inl1bnRpZSIsImRlYWRsaW5lIjoxNTAyNzg2NjgyfQ==',domain: "{$Think.config.qiniu.domain}",//自己的七牛云存储空间域名multi_selection: false,//是否允许同时选择多文件//文件类型过滤，这里限制为图片类型/*filters: {mime_types : [{title : "Image files", extensions: "jpg,gif,png"}]},*/auto_start: true,init: {'UploadProgress': function(up, file) {// 每个文件上传时，处理相关的事情},'FileUploaded': function(up, file, info) {//每个文件上传成功后,处理相关的事情//其中 info 是文件上传成功后，服务端返回的json，形式如//{// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",// "key": "gogopher.jpg"//}var domain = up.getOption('domain');var res = eval('(' + info + ')');var sourceLink = domain + res.key;//获取上传文件的链接地址// 生成截取图片var imgLink = Qiniu.imageMogr2({auto_orient: true, // 布尔值，是否根据原图EXIF信息自动旋正，便于后续处理，建议放在首位。strip: true, // 布尔值，是否去除图片中的元信息thumbnail: '!500x500r', // 缩放操作参数crop: '!500x500', // 裁剪操作参数gravity: 'Center', // 裁剪锚点参数quality: 40, // 图片质量，取值范围1-100format: 'png',// 新图的输出格式，取值范围：jpg，gif，png，webp等}, res.key);$(".loading_box").css("display","none");//success_box(1,'头像上传成功');$("#pickfiles").next("img").attr("src",imgLink);$("#pickfiles").next("img").css("display","block");$("input[name='avatar']").val(imgLink.substring(domain.length));//do something},'Key': function(up, file) {//当save_key和unique_names设为false时，该方法将被调用loading_box(10)var date = new Date().getTime();var ext = Qiniu.getFileExtension(file.name);var key = "avatar_"+date+"."+ext;return key;},'Error': function(up, err, errTip) {$(".loading_box").css("display","none");error_box(5,'格式不正确');}}});
4.上传图片的时候token出错
{error: "token not specified"}
我这里的问题是主动请求token的URL返回token格式不正确，正确格式应该是这样子的：
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
转载于:https://my.oschina.net/u/2928538/blog/1511364
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！