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

xiao7cn 发布于2019-08-22 10:33 / 2063人阅读

摘要：我们的功能需要用到的接口事件读取完成，无论成功与否，还有方法将文件读取为。检测是否为图片类型图片的编码这里设置获取的数据获取后台的给的将文件读取为上传事件当的时候说明我们成功的把图片传上七牛了，并且七牛给我们返回了一个字符串。

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

涉及到的API

FileReader()

paste事件

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

1.结构

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


//获取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);
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90818.html

Web聊天工具的富文本输入框

摘要：由于我们的富文本输入框比较简单，所以只需要处理两类数据即可，其一是普通的文本类型数据，包括表情其二则是图片类型数据。最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。仓库地址：chat-input-box预览地址：https://codepen.io...

iKcamp 2019-08-23 15:36 评论0 收藏0
基于 Github API 的图床 Chrome 插件开发全纪录

摘要：最近基于开发了一款图床插件，现在已经开源并上架应用商店。通过方法把转成，然后放在里测试一下看来效果是的，接下来就是对图床插件进行开发的步骤了。至此，整个插件的开发发布流程就已经完成了。 showImg(https://user-images.githubusercontent.com/12172868/57382983-8f29b900-71e0-11e9-8fe9-c0f12fd54...

DoINsiSt 2019-08-26 13:43 评论0 收藏0
使用七牛云存储的一些经验总结

摘要：原文使用七牛云存储的一些经验总结错误处理如果在与七牛的交互中出现状态码为的错误，一句话，不要犹豫，直接联系七牛技术支持。但是笔者发现，在使用七牛云转化后的视频，这样做是无效的。近段时间将使用七牛云存储来存放用户上传的数据，客户端通过七牛的js-sdk与七牛交互，服务端C#实现了七牛相关的接口。在这过程中多多少少遇到点问题，在这里总结一下。原文：使用七牛云存储的一些经验总结 599错...

Lyux 2019-08-21 12:23 评论0 收藏0
js实现图片粘贴上传到服务器并展示

摘要：如果有错误，，可通过下文中的监听函数拿到该错误码进行自定义处理是一个数组，返回若干图片的线上地址图片地址图片地址参考部分最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener(paste, function (event) { consol...

imingyu 2019-08-21 17:30 评论0 收藏0