图片裁切上传七牛云(base64上传)

本文介绍了如何使用cropper插件结合七牛云服务进行图片裁切上传。首先,通过插件获取base64编码,然后进行base64字符串的处理,去除不必要的头部信息。接着,配置七牛云的上传URL和参数,特别是token的获取,可以选择在线生成或通过后台实时生成。最后,通过AJAX请求将处理后的图片信息发送给后台存储,并展示在页面上。文章还提到了token生成的三种方法及其优缺点。
摘要由CSDN通过智能技术生成

首先用到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.g

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值