一個簡易的拖拽上傳文件和粘貼截圖，可擴展

準備工做

首先來一個可編輯的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);
    }

最後

寫的比較簡單，只是列出了大概思路，實際業務呢，仍是要擴展好多的。