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 ...
随机推荐
- 按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
- Linux下parted分区超过2TB硬盘-分区格式化
1.parted 设备名进入分区 parted /dev/vdb 2.输入print打印列出当前分区设备的磁盘容量大小 3.设置磁盘分区为gpt模 mklabel gpt 然后点击YES继续(提示磁盘 ...
- MAC终端下常用Git命令
送给新手的简单命令操作.远程Git和local的同步实现流程: 1.把git上的代码clone到本地 $ git clone http:xxxx(地址,可以http也可以ssh) 2.clone到本地 ...
- python基础02—运算符与流程控制
运算符与流程控制 运算符 赋值运算 用'='表示,'='的左边只能是变量 算术运算 +.-.*:加.减.乘 /:除法运算,运算结果为浮点数 //:除法运算,运算结果为整数(商) %:求余 **:求幂 ...
- SPOJ - FAVDICE 简单期望
dp[0]=0; // rep(i,1,n) dp[i]=(double)(n-i)/n*dp[i-1]+1+(double)(i)/n*dp[i]; // (n-i)/n dp[i]= n-i / ...
- C++ STL之Vector
向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为容器. vector 属于STL(Standard Template Library, 标准模板库)中的一种自定义的 ...
- 1136 A Delayed Palindrome (20 分)
Consider a positive integer N written in standard notation with k+1 digits ai as ak⋯a1a0 ...
- mac 系统配置(一)
1.终端颜色配置 文件 .bash_profile下添加环境变量如下: export CLICOLOR=1 export LSCOLORS=gxfxaxdxcxegedabagacad 环境变量生效: ...
- 常用维护SQL-数据清理
truncate某个库的表数据 show full processlist; select concat('truncate table ',table_schema,'.',table_name,' ...
- Knime读取Jason数据
Knime ETL 工具 Jason数据解析到DB 1. 下面例子是一段Jason代码 [{,,},{,,},{,,}] 2. 用文本文件存储上面代码. test_jason.txt 3. 用File ...