vue的拖拽文件
<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的拖拽文件的更多相关文章
- window响应拖拽文件操作
window响应拖拽文件操作 1.首先调用DragAcceptFiles,让控件或者窗体支持文件拖动操作函数功能:用来为拖放文件作初始化.函数原型: void DragAcceptFiles( HWN ...
- Unity输出PC端(Windows) 拖拽文件到app中
需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...
- [Java]接受拖拽文件的窗口
至于这个问题,Java的awt.dnd包下提供了许多完成这一功能的类 例如DropTarget.DropTargetListener等 先来讲一下DropTarget类,这个类完成和拖拽.复制文件等操 ...
- 解决Duilib集成CEF浏览器在Win10无法向客户区拖拽文件
在Duilib中集成CEF浏览器项目实际开发中,遇到一个问题. 一个需求从资源管理器(桌面)拖拽文件到客户端,窗口捕获WM_DROPFILES消息然后进行消息处理,但客户区是集成的CEF浏览器,浏览器 ...
- 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 注 ...
- vm虚拟机Kali无法拖拽文件解决办法
vm虚拟机Kali无法拖拽文件解决办法 apt-get updateapt-get install open-vm-tools-desktop fusereboot
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue内容拖拽放大缩小
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 190310HTML&CSS&JS
一.HTML 1.web server import socket def handle_request(client): buf = client.recv(1024) client.send(by ...
- HMTL5 本地数据库
数据库这个东东现在也可以用在web上了,目前为止, chrom 6 以上版本,opera 10 以上,safari 5以上支持这个功能. htm4中数据库只能放在服务器,只能通过服务器来访问,但是在h ...
- 深入解析Close()和Dispose()的区别
很多人都认为Close()方法内部会调用Dispose()方法,所以并没有本质的区别!实际上这个看法不是很准确,对有 些类来说,的确Close()和Dispose()没有本质区别,但是对有些类来说并非 ...
- BZOJ1012 [JSOI2008]最大数 线段树
题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:LLL不超过当前数列的长度.(L> ...
- 4、numpy+pandas速查手册
<Python数据分析常用手册>一.NumPy和Pandas篇 一.常用链接: 1.Python官网:https://www.python.org/2.各种库的whl离线安装包:http: ...
- Qt 学习之路 2(28):坐标系统
Qt 学习之路 2(28):坐标系统 豆子 2012年11月25日 Qt 学习之路 2 59条评论 在经历过实际操作,以及前面一节中我们见到的那个translate()函数之后,我们可以详细了解下 Q ...
- git 如何删除远程提交方法总结
今天不小心把代码提到主分支了,虽然改动只有一点点,但感觉asdasdasdsadd(要被骂死) 怎么样才能删除掉远程的分支呢. 假设我们有提交 commit commit commit 手残把3提交错 ...
- BZOJ - 4520 K远点对
题意:已知平面内 N 个点的坐标,求欧氏距离下的第 K 远点对 维护大小为2k最小堆,KD树的估值用前面提到的做法 PS.网上有人估价是使用边界四个点的最值来独立枚举,然而这样写似乎过不了 #incl ...
- C# DictionaryHelper
1 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System ...
- Oracle 11g 新特性 --SQL Plan Management 说明
Oracle 11g 新特性 --SQL Plan Management 说明 参见大神博主文章: http://blog.csdn.net/tianlesoftware/article/detail ...