前端实现类似于微信的聊天框

需求

公司的反馈后台只能回复用户文字，对于用户反馈的问题有时解释会非常有限。为了更好的向用户解答问题，反馈后台需要可以回复图片

分析

使用一个input框，设置type为file即可实现<input type="file">，如果需要回复多个图片可添加multiple属性即可<input type="file" mutiple>，soeasy啦

<input type="file" multiple>

但是，客服小姐姐说这样太麻烦了，每次添加图片都要找到相应的目录，而且如果想截图，还需要把截图保存下来再找目录，过程繁琐。既然是小姐姐的烦恼，那还有没有更优雅一点的方法。

实现

功能分析

这一次我的想法是，实现一个像微信聊天框一样的可编辑输入框，支持拖拽图片，粘贴图片，且可同时编辑聊天信息。

contenteditable属性

textarea元素可以编辑多行文字，但是不支持输入图片，不能满足我的需求。其实有一个属性可以帮助我们 contenteditable ,该属性会使目标元素变得和输入框一样能够里面输入内容，同时我们可以通过dom操作插入元素。MDN对该属性的解释是：contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

<div contenteditable>contenteditable是一个枚举属性<img src='../images/head.png' ></div>

如上图所见，div元素变成了一个可编辑内容的输入框，而且还能插入图片。有了 contenteditable 属性就可以解决我们最大的痛点了。

拖拽图片

拖拽文件时浏览器会默认打开该文件，所以我们需要注意阻止默认行为和冒泡行为。以下是代码实现

let dropEl = document.querySelector("#_reply")
// 处理拖拽文件逻辑
dropEl.addEventListener("dragenter",function(e){e.preventDefault();e.stopPropagation()},false);
dropEl.addEventListener("dragover",function(e){e.preventDefault();e.stopPropagation()},false);
dropEl.addEventListener("dragleave",function(e){e.preventDefault();e.stopPropagation()}.false);
dropEl.addEventListener("drop",function(e){
    e.preventDefault();
    e.stopPropagation();
    var files = e.dataTransfer.files; // 拖拽的文件
    addFiles(files); // 将图片添加到编辑框
})
// 图片添加到编辑框
function addFiles(files){
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (file.type.indexOf("image") != -1) {
            var reader = new FileReader();
            reader.onload = function (f) {
                var sp = document.createElement("img");
                sp.src = this.result
                dropEl.appendChild(sp);
            }
            reader.readAsDataURL(file);//把图片读成Base64编码字符串，以便显示
        }
    }
}

粘贴图片

复制粘贴通过监听paste事件，以下是代码实现

dropEl.addEventListener('paste', function (e) {
    var clipboardData = e.clipboardData;
    if (!(clipboardData && clipboardData.items)) {
        return;
    }
    var filesList = []
    for (var i = 0, len = clipboardData.items.length; i < len; i++) {
        var item = clipboardData.items[i];
        if (item.type.indexOf("image") != -1) {
            var pasteFile = item.getAsFile();
            filesList.push(pasteFile)
        }
    }
    if(filesList.length){
        addFiles(filesList)
    }
})

以上就是实现可编辑框，且可粘贴、拖拽图片的主要逻辑。太优雅了，客服小姐姐拍了拍你并给了一个大拇指。