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

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

image.png

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

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

<div class="updata-body" @dragenter="dragenter($event)">
    <div @drop="enentDrop($event)" @dragleave="dragleave($event)" @dragover="dragover($event)">
      <div class="drag-box">{{drapText}}</div>
    </div>
    <ul>
      <li v-for="(item, index) in fileData" :key="index">{{item.name}}</li>
    </ul>
  </div>
  <script>
   export default {
    name: 'drag',
    data() {
      return {
        drapText: '将文件拖拽到此处进行上传',
        fileData: []
        }
      }
    }
</script>

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地址，有需要可以去拉去代码。如果喜欢可以给个星星，谢谢～