超级简单的文件拖拽上传功能实现

超级简单的文件拖拽上传功能实现

指定回调

//获取dom
    var dropbox = document.getElementById("chat-editor");//chat-editor---目标区域id
    
    //注册动作回调
    //文件第一次进入拖动区时
    dropbox.addEventListener("drop", this.enentDrop, false);//this.enentDrop---指定的回调
    //文件在拖动区来回拖拽时
    dropbox.addEventListener("dragleave", function(e) {
      e.stopPropagation();
      e.preventDefault();
    });
    //文件已经在拖动区，并松开鼠标时
    dropbox.addEventListener("dragenter", function(e) {
      e.stopPropagation();
      e.preventDefault();
    });
    //文件在拖动区来回拖拽时
    dropbox.addEventListener("dragover", function(e) {
      e.stopPropagation();
      e.preventDefault();
    });

定义回调

enentDrop(e) {
    this.borderhover = false;
    e.stopPropagation();
    e.preventDefault(); //必填字段
    let fileData = e.dataTransfer.files;
    //fileData[0] 就是拿到的文件了,和普通组件上传拿到的文件对象是一样的,就可以像怎么玩怎么玩了
},