业务开发情境之:文本框的base64编码图片粘贴直接上传七牛
最近在做的一个聊天消息的功能。有个图片上传的功能,可以通过按钮上传也可以通过Ctrl+V上传。按钮上传的我们可以通过七牛的API就可以做了,我们现在来说说Ctrl+V的实现是怎么样的。
涉及到的API
FileReader()
paste事件
关于imageFile,用来把文件读入内存,并且读取文件中的数据。提供一个异步的api,使用该api可以在浏览器主线程中异步访问文件系统,读取文件中的数据。我们的功能需要用到FileReader的接口事件onloadend(读取完成,无论成功与否),还有方法readAsDataURL(将文件读取为DataURL)。关于FileReader更多的事件和方法感兴趣的同学可以自己去搜索,这里就不深究了。
1.结构
我们用的是textarea这个标签,为什么不使用div呢,因为是还有@功能,为了兼容两种方案。
//获取idvar textapp = document.getElementById('app');
我们这里的思路是通过检测粘贴的对象类型,如果是图片的话就拿到图片的base64位。并且在图片被读取完成的时候,我们在去请求后台拿到token。并且在拿到了token后我们就去请求七牛的API。
textapp.addEventListener('paste', function(e){ for (var i = 0; i < e.clipboardData.items.length; i++) { // 检测是否为图片类型 if (e.clipboardData.items[i].kind == "file" && /image\//.test(e.clipboardData.items[i].type)) { var imageFile = e.clipboardData.items[i].getAsFile(); var fileReader = new FileReader(); fileReader.onloadend = function(e) { //图片的base64编码 console.log(e.target.result); //这里设置获取token的数据 var thetoken = ''; var head = { "cmd": 0x4000C, "uid": parseInt(EXTUID), "ver": 1, "sid": SID, "apptype":1, "entry_type": 2 } var rdata = { "head":head } rdata = JSON.stringify(rdata); //获取后台的给的token $.post(request_url_server,rdata,function(data,status){ if (status == "success") { if (data['ret'] == 0){ var thetoken = data['token']; pubt64(e.target.result.replace('data:image/png;base64,',''), imageFile, thetoken); } } }); }; //将文件读取为DataUrl fileReader.readAsDataURL(imageFile); e.preventDefault(); break; } }});
当xhr.readyState==4的时候说明我们成功的把图片传上七牛了,并且七牛给我们返回了一个json字符串。我们把这个字符串转化成json对象,里面包含有图片的key值,hash值,现在我们就拿到了key把消息发送给服务端啦。
function pubt64(pic,imageFile,thetoken){ //图片的base64位 var pic = pic; //imageFile.size为图片流的大小 var url = "http://upload.qiniu.com/putb64/"+imageFile.size; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState==4){ // 成功 console.log(xhr.responseText); //转换成json对象,包含key值,hash值。 var dataImg = JSON.parse(xhr.responseText); //发送给服务端消息 sendImg('paste', dataImg); } } xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("Authorization", "UpToken "+thetoken); xhr.send(pic);}
关键字:base64, 图片上传, token, JavaScript
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!