vue文件拖动上传

vue实现拖动文件上传

1、第一种

<p ref="onloadCon" class="onloadCon" :class="{'drop-active': dropActive}">将文件拖拽到此处上传</p>

data() {
  return {
     dropActive: false
  }
},
mounted() {
  const dropArea = this.$refs.onloadCon;
  dropArea.addEventListener("drop", this.dropEvent, false);
  dropArea.addEventListener("dragleave", (e) => {
    e.preventDefault();
    this.dropActive = false;
  }, false);
  dropArea.addEventListener("dragenter", (e) => {
    e.preventDefault();
    this.dropActive = true;
  }, false);
  dropArea.addEventListener("dragover", (e) => {
    e.preventDefault();
    this.dropActive = true;
  }, false);
},
methods: {
  dropEvent(e) {
     const files = e.dataTransfer.files;
     e.preventDefault();
     this.dropActive = false;
     // this.excelChange(files); 文件处理
  }
}

2、第二种（其实就是在标签上直接写事件，没啥说的，差不多）

借鉴就行。。。

标签：files,vue,false,拖动,dropArea,addEventListener,preventDefault,dropActive,上传
来源： https://www.cnblogs.com/wangjishu/p/14955686.html