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

2016-07-29 23:45:00

最近在做的一个聊天消息的功能。有个图片上传的功能，可以通过按钮上传也可以通过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

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