效果图

代码如下：

的事

<template>
    <div id="drop-area" :class="dropActive ? 'drop-active' : ''">
        <p>将文件拖拽到此处即可完成文件上传。</p>
    </div>
</template>
<script>
export default {
  name:'DropFile',
  data(){
    return {
      dropActive:false,
    }
  },
  methods:{
    dropEvent(e) {
      this.dropActive = false
      e.stopPropagation()
      e.preventDefault()
      this.uploadFile(e.dataTransfer.files)
    },
    uploadFile (file) { // 渲染上传文件
      console.log(file[0], 'file')
      if (file && file.length) {
        //自行发挥，存本地或上传服务器
      }
    },
  },
  mounted () {
    let dropArea = document.getElementById('drop-area')
    dropArea.addEventListener('drop', this.dropEvent, false)
    dropArea.addEventListener('dragleave', (e) => {
      e.stopPropagation()
      e.preventDefault()
      this.dropActive = false
    })
    dropArea.addEventListener('dragenter', (e) => {
      e.stopPropagation()
      e.preventDefault()
      this.dropActive = true
    })
    dropArea.addEventListener('dragover', (e) => {
      e.stopPropagation()
      e.preventDefault()
      this.dropActive = true
    })
  }
}
</script>
<style scoped lang="less">
  #drop-area {
    width: 200px;
    height: 200px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    p{
      width: 180px;
      margin: 80px auto;
    }
  }
  .drop-active{
  background-color: rgba(231,234,246,0.8);
}
</style>

实现思路：

监听拖动事件
        让vue支持文件拖拽，在mounted(){}里，将文件拖动到区域（这里的区域就是id=“drop-area”），监听区域拖动事件
说明：
        1、文件第一次进入拖动区时，触发 dragenter 事件
        2、文件在拖动区来回拖拽时，不断触发 dragover 事件
        3、文件已经在拖动区，并松开鼠标时，触发 drop 事件
        4、文件在拖动区来回拖拽时，不断触发dragleave 事件 //拖后放
实现拖动上传，我们只需要关心 drop 事件。不过另外三个事件也需要监听，目的是阻止浏览器默认行为。如果不阻止，把文件拖到浏览器时，浏览器就会自动下载这个文件（这是默认行为），drop 事件触发不了。

处理拖动上传文件
        this.dropEvent函数写在methods:{}里，监听事件会有文件回调 e.dataTransfer
可以了解下，拖动到浏览器的每个文件都是一个 File 对象。