业务开发情境之:文本框的base64编码图片粘贴直接上传七牛

最近在做的一个聊天消息的功能。有个图片上传的功能,可以通过按钮上传也可以通过Ctrl+V上传。按钮上传的我们可以通过七牛的API就可以做了,我们现在来说说Ctrl+V的实现是怎么样的。

涉及到的API

  1. FileReader()

  2. 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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部