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

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

涉及到的API

• FileReader()

• paste事件

关于imageFile，用来把文件读入内存，并且读取文件中的数据。提供一个异步的api，使用该api可以在浏览器主线程中异步访问文件系统，读取文件中的数据。我们的功能需要用到FileReader的接口事件onloadend(读取完成，无论成功与否)，还有方法readAsDataURL(将文件读取为DataURL)。关于FileReader更多的事件和方法感兴趣的同学可以自己去搜索，这里就不深究了。

1.结构

我们用的是textarea这个标签，为什么不使用div呢，因为是还有@功能，为了兼容两种方案。

<textarea id="app"></textarea>
//获取id
var textapp = document.getElementById('app');

2.绑定输入框的paste事件

我们这里的思路是通过检测粘贴的对象类型，如果是图片的话就拿到图片的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;
        }
    }
});

3.上传事件

当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);
}