Vue实现文件拖拽功能

最新推荐文章于 2024-03-27 21:36:33 发布

小辰哥哥

最新推荐文章于 2024-03-27 21:36:33 发布

阅读量942

点赞数 4

分类专栏： Vue2.0 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43630831/article/details/126142658

版权

Vue2.0 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

*Vue实现文件拖拽功能*
总结

Vue实现文件拖拽功能

1.template模块

<div id="fileUpload" style="width: 300px;height: 300px;background-color: #66b1ff">
  <p style="font-size: 16px">将文件拖拽到此处</p>
</div>

2.script模块

export default {
  name: "vue_project",
  methods: {
    // 拖拽文件
    dropEvent(e) {
      e.stopPropagation()
      e.preventDefault()
      this.uploadFile(e.dataTransfer.files)
    },
    uploadFile(file) { // 渲染上传文件
      // 校验成功后，上传文件
      for (let i = 0; i < file.length; i++) {
        if (this.beforeUpload(file[i])) {

          // 执行文件上传代码块
          console.log(file[i]);

        } else {
          this.$message({type: 'warning', message: '文件不符合规范'})
        }
      }
    },
    beforeUpload(file) {
      // 文件上传前的判断
      if (file.size / 1024 / 1024 > 500) {
        this.$message({type: "error", message: "上传文件大小不能超过50MB!"});
        return false;
      } else {
        return true;
      }
    }
  },
  mounted() {
    let dropArea = document.getElementById('fileUpload');
    dropArea.addEventListener('drop', this.dropEvent, false)
    dropArea.addEventListener('dragleave', (e) => {
      e.stopPropagation()
      e.preventDefault()
    })
    dropArea.addEventListener('dragenter', (e) => {
      e.stopPropagation()
      e.preventDefault()
    })
    dropArea.addEventListener('dragover', (e) => {
      e.stopPropagation()
      e.preventDefault()
    })
  }
}