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

时间 2020-01-06

标签 vue 解析剪切板图片实现发送功能繁體版

原文原文链接

每一份坚持都是成功的累积，只要相信本身，总会遇到惊喜😜javascript

前言

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

实现思路

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

实现过程

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

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

/** * 监听粘贴监听事件: 实现图片粘贴 */
let that = this;
document.body.addEventListener('paste', function (e) {
    // 监听文件流
    let reader = new FileReader();
    let clipboard = e.clipboardData;
    reader.onload = function (evt) {
        // 建立一个img
        let img = document.createElement('img');
        img.src = evt.target.result;//设置连接
        // 图片渲染
        that.$refs.msgInputContainer.append(img);
    };
    let file = clipboard.items[0];
    if (file.kind == 'file') {
        reader.readAsDataURL(file.getAsFile());//启动文件流事件
    }
});
复制代码

完善消息发送函数，获取输入框里的全部子元素，找出base64图片将其转为文件并上传至服务器（此处须要注意：base64转文件时，须要用正则表达式删掉base64图片的前缀），将当前图片地址推送至websocket服务。node

对下述代码有不理解的地方，可阅读个人另外一篇文章：Vue实现图片与文字混输，ios

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图片转flieweb

// 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推送的消息axios

// 消息解析
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码是错误的，因此一直没有成功。

写在最后

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