其他分享
首页 > 其他分享> > vue文件拖动上传

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