Vue解析剪切板图片并实现发送功能

7,508 阅读4分钟

每一份坚持都是成功的累积,只要相信自己,总会遇到惊喜😜

前言

我们在使用QQ进行聊天时,从别的地方Ctrl+C一张图片,然后在聊天窗口Ctrl+V,QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里,按下Enter键,这张图片将会发送出去。接下来跟各位开发者分享下这项功能在Vue中如何来实现。先跟大家展示下最终实现的效果。在线体验地址

实现思路

  • 页面挂载时监听剪切板粘贴事件
  • 监听文件流
  • 读取文件流中的数据
  • 创建img标签
  • 将获取到的base64码赋值到img标签的src属性
  • 将生成的img标签append到即将发送的消息容器里
  • 监听回车事件
  • 获取可编辑div容器中的所有子元素
  • 遍历获取到的元素,找出img元素
  • 判断当前img元素是否有alt属性(表情插入时有alt属性),
  • 如果没有alt属性当前元素就是图片
  • 将base64格式的图片转成文件上传至服务器
  • 上传成功后,将服务器返回的图片地址推送到websocket服务
  • 客户端收到推送后,渲染页面

实现过程

本片文章主要讲解剪切板图片的解析以及将base64图片转换成文件上传至服务器,下方代码中的axios的封装以及websocket的配置与使用可参考我的另外两篇文章:Vue合理配置axios并在项目中进行实际应用Vue合理配置WebSocket并实现群聊

  • 监听剪切板事件(mounted生命周期中),将图片渲染到即将发送到消息容器里

    const that = this;
    document.body.addEventListener('paste', function (event) {
        // 自己写的一个全屏加载插件,文章地址:https://juejin.cn/post/6844904054343090183
        that.$fullScreenLoading.show("读取图片中");
        // 获取当前输入框内的文字
        const oldText = that.$refs.msgInputContainer.textContent;
        // 读取图片
        let items = event.clipboardData && event.clipboardData.items;
        let file = null;
        if (items && items.length) {
            // 检索剪切板items
            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
            }
        }
        // 预览图片
        const reader = new FileReader();
        reader.onload = function(event) {
            // 图片内容
            const imgContent = event.target.result;
            // 创建img标签
            let img = document.createElement('img');//创建一个img
            // 获取当前base64图片信息,计算当前图片宽高以及压缩比例
            let imgObj = new Image();
            let imgWidth = "";
            let imgHeight = "";
            let scale = 1;
            imgObj.src = imgContent;
            imgObj.onload = function() {
                // 计算img宽高
                if(this.width<400){
                    imgWidth = this.width;
                    imgHeight = this.height;
                }else{
                    // 输入框图片显示缩小10倍
                    imgWidth = this.width/10;
                    imgHeight = this.height/10;
                    // 图片宽度大于1920,图片压缩5倍
                    if(this.width>1920){
                        // 真实比例缩小5倍
                        scale = 5;
                    }
                }
                // 设置可编辑div中图片宽高
                img.width = imgWidth;
                img.height = imgHeight;
                // 压缩图片,渲染页面
                that.compressPic(imgContent,scale,function (newBlob,newBase) {
                    // 删除可编辑div中的图片名称
                    that.$refs.msgInputContainer.textContent = oldText;
                    img.src = newBase; //设置链接
                    // 图片渲染
                    that.$refs.msgInputContainer.append(img);
                    that.$fullScreenLoading.hide();
                });
            };
        };
        reader.readAsDataURL(file);
    });
    
  • base64图片压缩函数

    // 参数: base64地址,压缩比例,回调函数(返回压缩后图片的blob和base64)
    compressPic:function(base64, scale, callback){
        const that = this;
        let _img = new Image();
        _img.src = base64;
        _img.onload = function() {
            let _canvas = document.createElement("canvas");
            let w = this.width / scale;
            let h = this.height / scale;
            _canvas.setAttribute("width", w);
            _canvas.setAttribute("height", h);
            _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
            let base64 = _canvas.toDataURL("image/jpeg");
            // 当canvas对象的原型中没有toBlob方法的时候,手动添加该方法
            if (!HTMLCanvasElement.prototype.toBlob) {
                Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
                    value: function (callback, type, quality) {
                        let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
                            len = binStr.length,
                            arr = new Uint8Array(len);
                        for (let i = 0; i < len; i++) {
                            arr[i] = binStr.charCodeAt(i);
                        }
                        callback(new Blob([arr], {type: type || 'image/png'}));
                    }
                });
            }else{
                _canvas.toBlob(function(blob) {
                    if(blob.size > 1024*1024){
                        that.compressPic(base64, scale, callback);
                    }else{
                        callback(blob, base64);
                    }
                }, "image/jpeg");
            }
        }
    }
  • 完善消息发送函数,获取输入框里的所有子元素,找出base64图片将其转为文件并上传至服务器(此处需要注意:base64转文件时,需要用正则表达式删掉base64图片的前缀),将当前图片地址推送至websocket服务。

    对下述代码有不理解的地方,可阅读我的另一篇文章:Vue实现图片与文字混输

    sendMessage: function (event) {
        if (event.keyCode === 13) {
            // 阻止编辑框默认生成div事件
            event.preventDefault();
            let msgText = "";
            // 获取输入框下的所有子元素
            let allNodes = event.target.childNodes;
            for (let item of allNodes) {
                // 判断当前元素是否为img元素
                if (item.nodeName === "IMG") {
                    if (item.alt === "") {
                        // 是图片
                        let base64Img = item.src;
                        // 删除base64图片的前缀
                        base64Img = base64Img.replace(/^data:image\/\w+;base64,/, "");
                        //随机文件名
                        let fileName = (new Date()).getTime() + ".jpeg";
                        //将base64转换成file
                        let imgFile = this.convertBase64UrlToImgFile(base64Img, fileName, 'image/jpeg');
                        let formData = new FormData();
                        // 此处的file与后台取值时的属性一样,append时需要添加文件名,否则一直时blob
                        formData.append('file', imgFile, fileName);
                        // 将图片上传至服务器
                        this.$api.fileManageAPI.baseFileUpload(formData).then((res) => {
                            const msgImgName = `/${res.fileName}/`;
                            // 消息发送: 发送图片
                            this.$socket.sendObj({
                                msg: msgImgName,
                                code: 0,
                                username: this.$store.state.username,
                                avatarSrc: this.$store.state.profilePicture,
                                userID: this.$store.state.userID
                            });
                            // 清空输入框中的内容
                            event.target.innerHTML = "";
                        });
                    } else {
                        msgText += `/${item.alt}/`;
                    }
                } else {
                    // 获取text节点的值
                    if (item.nodeValue !== null) {
                        msgText += item.nodeValue;
                    }
                }
            }
            // 消息发送: 发送文字,为空则不发送
            if (msgText.trim().length > 0) {
                this.$socket.sendObj({
                    msg: msgText,
                    code: 0,
                    username: this.$store.state.username,
                    avatarSrc: this.$store.state.profilePicture,
                    userID: this.$store.state.userID
                });
                // 清空输入框中的内容
                event.target.innerHTML = "";
            }
        }
    }
    
  • base64图片转flie

    // base64转file
    convertBase64UrlToImgFile: function (urlData, fileName, fileType) {
        // 转换为byte
        let bytes = window.atob(urlData);
        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Int8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        // 转换成文件,添加文件的type,name,lastModifiedDate属性
        let blob = new Blob([ab], {type: fileType});
        blob.lastModifiedDate = new Date();
        blob.name = fileName;
        return blob;
    }
    
  • axios文件上传接口的封装(注意:需要设置"Content-Type":"multipart/form-data"})

    /*
    * 文件管理接口
    * */
    import services from '../plugins/axios'
    import base from './base'; // 导入接口域名列表
    
    const fileManageAPI = {
        // 单文件上传
        baseFileUpload(file){
            return services._axios.post(`${base.lkBaseURL}/uploads/singleFileUpload`,file,{headers:{"Content-Type":"multipart/form-data"}});
        }
    };
    
    export default fileManageAPI;
    
    
  • 解析websocket推送的消息

    // 消息解析
    messageParsing: function (msgObj) {
        // 解析接口返回的数据并进行渲染
        let separateReg = /(\/[^/]+\/)/g;
        let msgText = msgObj.msgText;
        let finalMsgText = "";
        // 将符合条件的字符串放到数组里
        const resultArray = msgText.match(separateReg);
        if (resultArray !== null) {
            for (let item of resultArray) {
                // 删除字符串中的/符号
                item = item.replace(/\//g, "");
                // 判断是否为图片: 后缀为.jpeg
                if(this.isImg(item)){
                    // 解析为img标签
                    const imgTag = `<img src="${base.lkBaseURL}/upload/image/${item}" alt="聊天图片">`;
                    // 替换匹配的字符串为img标签:全局替换
                    msgText = msgText.replace(new RegExp(`/${item}/`, 'g'), imgTag);
                }
            }
            finalMsgText = msgText;
        } else {
            finalMsgText = msgText;
        }
        msgObj.msgText = finalMsgText;
        // 渲染页面
        this.senderMessageList.push(msgObj);
        // 修改滚动条位置
        this.$nextTick(function () {
            this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
        });
    }
    
  • 判断当前字符串是否为有图片后缀

    // 判断是否为图片
    isImg: function (str) {
        let objReg = new RegExp("[.]+(jpg|jpeg|swf|gif)$", "gi");
        return objReg.test(str);
    }
    

踩坑记录

  • 直接将base64格式的图片通过websocket发送至服务端

    结果很明显,服务端websocket服务报错,报错原因:内容超过最大长度。

  • 前端通过post请求将base64码传到服务端,服务端直接将base64码解析为图片保存至服务器

    从下午2点折腾到晚上6点,一直在找Java解析base64图片存到服务器的方案,最终选择了放弃,采用了前端转换方式,这里的问题大概是前端传base64码到后端时,http请求会进行转义,导致后端解析得到的base64码是错误的,所以一直没有成功。

  • 项目地址:chat-system

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于掘金,如需转载请评论区留言💌