<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. go的三个常用命令go run go build go install

    go的三个常用命令 go run go build go install 命令源码文件:含有 main函数 的文件 库源码文件:不包含 main函数 的文件, 主要用于编译成静态文件.a供其他包调用 ...

  2. 《Andrew Ng深度学习》笔记3

    浅层神经网络 初步了解了神经网络是如何构成的,输入+隐藏层+输出层.一般从输入层计算为层0,在真正计算神经网络的层数时不算输入层.隐藏层实际就是一些算法封装成的黑盒子.在对神经网络训练的时候,就是对神 ...

  3. TX2 上使用opencv 调用板载mipi摄像头

    使用命令测试 gst-launch-1.0 nvcamerasrc ! 'video/x-raw(memory:NVMM), width=(int)1920, height=(int)1080, fo ...

  4. nginx 之 proxy_pass

    nginx中有两个模块都有proxy_pass指令 ngx_http_proxy_module的proxy_pass 语法: proxy_pass URL; 场景: location, if in l ...

  5. HDU-2063(二分图匹配模板题)

    过山车Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  6. Services版本tomcat 内存和perm 设置

    当在tomcat的webapps文件夹中部署需要大量资源的war包时,启动tomcat,war包将不能被成功部署. tomcat安装有services版安装和开发版安装. 本经验将介绍如何设置两种版本 ...

  7. XMAL基础

    XMAL基础(WPF编程宝典) XAML基础规则 XAML文档中的每个元素都映射为.Net类的一个实例.元素名称也完全对应于类名.例如:元素<Button>指示WPF创建Button对象 ...

  8. n个骰子的和,组成数字m的可能

    //n个骰子的和,组成数字m的可能 function f(n,m) { if(n==1){ return 1; } var len=m-n; var sum=0; while (len>=0){ ...

  9. docker一键安装

    1.任意新服务器上一键安装最新版docker curl -s https://get.docker.com/ | sh 注:安装完成之后,docker默认是没有启动的,需要启动docker 2.doc ...

  10. PIE SDK矢量数据的查询

    1.功能简介 矢量数据查询有属性查询和空间几何查询,下面对矢量数据的属性查询和空间查询做介绍 2.功能实现说明 2.1. 矢量数据的属性和空间查询 2.2. 实现思路及原理说明 第一步 得到要查询的图 ...