Vue 超简单教你如何实现一个文件拖拽

HTML 拖放（Drag and Drop）接口使应用程序能够在Firefox和其他浏览器中使用拖放功能。例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。对于网站、扩展以及 XUL 应用程序来说，你可以自定义能够成为可拖拽的元素类型、可拖拽元素产生的反馈类型，以及可放置的元素。

image.png

看到这个图片之后是不是有一种豁然开朗的感觉？我们要想实现一个简单的拖拽文件上传，只需要4个属性 drop、dragleave、dragenter、dragover;

话不多说，直接上代码；
html结构

    

      
{{drapText}}
    
    

      
{{item.name}}
    
  
  

image.png

接下来就是方法和思路
第一步 dragenter() 是当选中的文件移入到拖拽的区域会触发此方法
第二步 dragover() 是在拖拽的区域不断的移动会触发此方法
第三步 enentDrop() 鼠标在拖拽的区域松开鼠标，释放拖拽的问题会触发此方法
第四步 dragleave() 是拖拽的文件离开拖拽的区域会触发此方法

methods: {
      enentDrop: function(e) {
        e.stopPropagation();
        e.preventDefault(); 
        this.updataFun(e.dataTransfer.files)
      },
      dragleave(e) {
        e.stopPropagation();
        e.preventDefault();
      },
      dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
        this.drapText = '松开鼠标完成上传';
      },
      dragover(e) {
        e.stopPropagation();
        e.preventDefault();
      },
      updataFun(data) {
        let that = this;
        for (let i = 0; i < data.length; i++) {
          this.fileData.push(data[i])
        }
        this.drapText = '上传成功';
        setTimeout(() => {
          that.drapText = '将文件拖拽到此处进行上传';
        }, 500);
      }
    }

方法里需要注意的一些问题；1. 一定要阻止默认事件和阻止冒泡事件，不然就会发生你把文件拖入到浏览器中会自动下载，如果是图片的话就会默认展示到浏览器中；
2. 在拖拽释放之后想要获取上传的文件信息e.dataTransfer.files

image.png

https://github.com/xiangnideye/vue-select 这个是github地址，有需要可以去拉去代码。如果喜欢可以给个星星，谢谢～