一个简易的拖拽上传文件和粘贴截图，可扩展

准备工做

首先来一个可编辑的div和一些简单的样式

<style>
        #test{
        height: 300px;
        width: 300px;
        border: 1px solid #ddd;
      }
    </style> 
    <div id="test" contenteditable></div>
    <script>
        init({el:"#test", callback: testCb});
        function testCb(res){
            console.log(res)
        }
    </script>

来封装两个方法

function init({el, callback}){ // 获取到操做的文件
        
    }
    function fileToBase64(file, callback){ // 文件转为base64抛出
        
    }
    window.init = init;

开始

拖拽文件

要使用到的三个相关事件， 分别是： dragover， drop， dragleave

1. 当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件。
2. 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，触发drop事件
3. 被拖动的元素或文本选区移出有效释放目标区 drop 元素在有效释放目标区上释放, 触发dragleave事件

咱们能够在dragover和dragleave来处理拖动当当前位置和拖动完成后或离开的样式。在drop事件回调来处理要上传的文件

function init({el, callback}){ 
        const upBox = document.querySelector(el);
        if(!upBox){return};
        
        // 拖拽
        
        upBox.addEventListener('dragover', dragoverFile)
        upBox.addEventListener('drop', dropFile)
        upBox.addEventListener('dragleave', dragleaveFile)
        function dragoverFile(e) {
            e.preventDefault();
        }
        function dragleaveFile(e) {
           
        }
        function dropFile(e) {
            e.preventDefault();
            let fileList = e.dataTransfer.files;
            let file = fileList[0];
            // 在这里就能够拿到拖拽的文件了，传到下一个函数进行处理
            fileToBase64(file, callback)
        }
    }

粘贴

粘贴的话用到的事件就是 paste 了

function init({el, callback}){ 
        const upBox = document.querySelector(el);
        if(!upBox){return};
        
        // 拖拽
        
        upBox.addEventListener('dragover', dragoverFile)
        upBox.addEventListener('drop', dropFile)
        upBox.addEventListener('dragleave', dragleaveFile)
        function dragoverFile(e) {
            e.preventDefault();
        }
        function dragleaveFile(e) {
           
        }
        function dropFile(e) {
            e.preventDefault();
            let fileList = e.dataTransfer.files;
            let file = fileList[0];
            // 在这里就能够拿到拖拽的文件了，传到下一个函数进行处理
            fileToBase64(file, callback)
        }
        
        // 粘贴
        upBox.addEventListener('paste', pasteFile)
        function pasteFile(e) {
            e.preventDefault();
            const items = e.clipboardData.items;
            for( let i=0; i<items.length; i++ ){
                let item = items[i];
                if(item.kind === "file"){
                    const file = item.getAsFile();
                    fileToBase64(file, option)
                }
            }
        } 
    }

这里并不能粘贴文件

最后把文件转成base64

function fileToBase64(file, callback){
        // 实例化一个FileReader对象， 当读取完成文件时，把base64抛出
        const reader = new FileReader();
        reader.onload = function(e){
            callback(e.target.result)
        }
        reader.readAsDataURL(file);
    }

最后

写的比较简单，只是列出了大概思路，实际业务呢，仍是要扩展好多的。