图片裁切上传七牛云（base64上传）

首先用到cropper插件（点击这里下载插件） 把index里面的函数imagesAjax(dataUrl)修改下，
按照七牛给的示例（示例地址）
function putb64(){
var pic = "填写你的base64后的字符串";
var url = "http://upload.qiniu.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token");
xhr.send(pic);
}
这里有好多的坑，一个个说
1.var pic = “填写你的base64后的字符串”;
这里是要填写你的base64,咱们利用切图工具已经转换成了base64(dataUrl就是),你可以打印出来看下，大概是data:image/jpeg;base64,/9j/4AAQSkZJ…这样的，我们要的是base64后的，就是data:image/jpeg;base64,(包括逗号)去掉，使用正则var dataUrl = dataUrl.replace(/^.*?,/, ”);或picBase.substring(23)；
2. var url =
这里你建空间的时候就选择了哪个区域的，我是华南的链接一般都是用客户端的可以点击这里查看你的链接，20264是文件大小。支持传入 -1 表示文件大小以 http request body 为准。注：裁切的时候可以限制大小，所以这块就直接-1了。
3.if (xhr.readyState==4){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}这里面可以改下，改成
if (xhr.readyState == 4) {
var keyText = xhr.responseText;
// 返回的keyText是字符串，需要装换成json
keyText=JSON.parse(keyText)
//keyText.key 是返回的图片文件名
key = "http://oyewd9lsz.bkt.clouddn.com/"+keyText.key;
//console.log(getToken)
$.ajax({
url: "1.php",
data:{
file_key:key,
},
type: 'post',
success: function (data) {
var data=JSON.parse(data)
$("#op").attr("src",key)
},
error: function () {
console.log("上传base64至七牛失败");
}
})
}
解释下：为什么加AJAX请求，因为你获得的地址要发给后台做存储，在页面初始化的时候调用，加载到页面当中。主要说下key，key是图片地址，http://oyewd9lsz.bkt.clouddn.com/换成你的外链默认域名（点击这里查看你的域名）

你打印keyText 会发现hash和key的值是一样的，没关系，key就是你图片生成的名称，没有扩展名。
4.关于token生成有三种方法
方法1
uptoken : ‘’, // uptoken 是上传凭证，由其他程序生成
官方提供一个在线版本供大家使用如果想使用在线的请点击这里(网速不好经常加载失败)

点击Run右下角会出来要你填的框，只填前三个就行(注：bucketName是你七牛存储空间的名称)，点击生成Uptoken,有效期最长12个小时，12小时后就要从新填写生成token,否则不能上传（这个例子就是方法一实现的），token是最下面的一串字符（红框内被划的面目全非的就是）。如果是后台可以每次上传时时生成token，这样就没有有效期了（这是方法2内容）。


方法2
uptoken_url: ‘/uptoken’, // Ajax 请求 uptoken 的 Url，强烈建议设置（服务端提供）
推荐使用方法2，安全，代码如下：

$.ajax({            url: "uptoken.php",            type: 'post',            success: function (data) {                var data = JSON.parse(data)                var up = data.uptoken;                var url = "http://upload-z2.qiniu.com/putb64/-1";                var xhr = new XMLHttpRequest();                xhr.onreadystatechange = function () {                    if (xhr.readyState == 4) {                        //alert(up)                        var keyText = xhr.responseText;                        //keyText=strToJson(keyText);                        console.log(xhr.responseText)                        // 返回的key是字符串，需要装换成json                        keyText = JSON.parse(keyText)                        // keyText = strToJson(keyText);                        //keyText.key 是返回的图片文件名                        key = "http://oyewd9lsz.bkt.clouddn.com/" + keyText.key;                         $.ajax({                            url: "1.php",                            data: {                                //token:getToken,                                file_key: key,                            },                            type: 'post',                            success: function (data) {                                var data = JSON.parse(data)                                         $("#op").attr("src", key)                            },                            error: function () {                                console.log("上传base64至七牛失败");                            }                        })                    }                }                xhr.open("POST", url, true);                xhr.setRequestHeader("Content-Type", "application/octet-stream");                xhr.setRequestHeader("Authorization","UpToken "+up);                xhr.send(picBase);            }        })

在外面包个AJAX是为了传值up,up的值从后台获取，每次请求都是新的；还有就是

xhr.setRequestHeader("Authorization","UpToken "+up);中的"UpToken "+up格式要想我这样写。

方法3
uptoken_func: function(file){ // 在需要获取 uptoken 时，该方法会被调用
// do something
return uptoken;
}