<div ref='select_frame'  ondragstart="return false">//防止跳转

</div>
this.$refs.select_frame.ondragleave = (e) => {
e.preventDefault() // 阻止离开时的浏览器默认行为
}
this.$refs.select_frame.ondrop = (e) => {
e.preventDefault() // 阻止拖放后的浏览器默认行为
const data = e.dataTransfer.files[0] // 获取文件对象
if (data.length < 1) {
return // 检测是否有文件拖拽到页面
}
console.log(data)
this.upload(data)//上传文件的方法
}
this.$refs.select_frame.ondragenter = (e) => {
e.preventDefault() // 阻止拖入时的浏览器默认行为
this.$refs.select_frame.border = '2px dashed red'
}
this.$refs.select_frame.ondragover = (e) => {
e.preventDefault() // 阻止拖来拖去的浏览器默认行为
}

  上面的代码就可以实现vue中拖拽文件上传啦~

vue的拖拽文件的更多相关文章

  1. window响应拖拽文件操作

    window响应拖拽文件操作 1.首先调用DragAcceptFiles,让控件或者窗体支持文件拖动操作函数功能:用来为拖放文件作初始化.函数原型: void DragAcceptFiles( HWN ...

  2. Unity输出PC端(Windows) 拖拽文件到app中

    需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...

  3. [Java]接受拖拽文件的窗口

    至于这个问题,Java的awt.dnd包下提供了许多完成这一功能的类 例如DropTarget.DropTargetListener等 先来讲一下DropTarget类,这个类完成和拖拽.复制文件等操 ...

  4. 解决Duilib集成CEF浏览器在Win10无法向客户区拖拽文件

    在Duilib中集成CEF浏览器项目实际开发中,遇到一个问题. 一个需求从资源管理器(桌面)拖拽文件到客户端,窗口捕获WM_DROPFILES消息然后进行消息处理,但客户区是集成的CEF浏览器,浏览器 ...

  5. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

  6. vm虚拟机Kali无法拖拽文件解决办法

    vm虚拟机Kali无法拖拽文件解决办法 apt-get updateapt-get install open-vm-tools-desktop fusereboot

  7. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  8. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  9. vue内容拖拽放大缩小

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Deploy Flask app to Apache on Windows

    内容已过期,分割线以下为原文存档. 故事背景 这次我需要将一个Flask应用部署到本地的Windows服务器上.操作系统是64位的,程序是基于Python 3开发的,大体就是这样. 部署选项 根据Fl ...

  2. JAVA数据结构--插入排序

    插入排序(英语:Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in- ...

  3. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  4. Oracle分析函数系列之first_value/last_value:在记录集中查找第一条记录和最后一条记录

    [转自] http://blog.csdn.net/rfb0204421/article/details/7675911 注意:与max,min的区别,虽然也可以实现,但只是针对数字字段. 1.初始化 ...

  5. Q541 反转字符串 II

    给定一个字符串和一个整数 k,你需要对从字符串开头算起的每个 2k 个字符的前k个字符进行反转.如果剩余少于 k 个字符,则将剩余的所有全部反转.如果有小于 2k 但大于或等于 k 个字符,则反转前 ...

  6. SQL语句练习45题(从第11题开始)

    CREATE TABLE student (sno VARCHAR(3) NOT NULL, sname VARCHAR(4) NOT NULL, ssex VARCHAR(2) NOT NULL, ...

  7. 2019.3.22 SQL语句(基础篇)

    SQL语句 创建一个数据库: create database+数据库名; 使用数据库: use+数据库名; 查看mySQL中有哪些数据库: show databases; 删除数据库 drop dat ...

  8. 读取日志文件,搜索关键字,打印关键字前5行。yield、deque实例

    from collections import deque def search(lines, pattern, history=5): previous_lines = deque(maxlen=h ...

  9. Apache Beam的基本概念

    不多说,直接上干货! Apache Beam的基本概念 在使用Apache Beam构建数据处理程序,首先需要使用Beam SDK中的类创建一个Driver程序,在Driver程序中创建一个满足我们数 ...

  10. git使用问题及解决方法

    1. 设置pull默认rebasegit config --global pull.rebase true 2. 问题解决:Unlink of file '.git/objects/pack/pack ...