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 ...
随机推荐
- Vue-think脚手架
准备重构的项目,原来的后台是thinkPHP写的,刚刚摸VUE,不知道里面数据调用原理,想先安装vuethink学习一下. 结果安装半天,npm run dev的时候报错,尝试了很多方法,各种重装,看 ...
- springmvc相关配置和用法
目录如下: 一.spring mvc 核心类与接口 二.spring mvc 核心流程图 三.spring mvc DispatcherServlet说明 四.spring mvc 父子上下文的说明 ...
- html的第一个程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 制作支持UEFI启动的原装系统安装盘
目前市面上大多数的计算机主板均支持UEFI,而且默认就是UEFI,会让新手安装系统遇到各种问题,最常见的就是找不到硬盘,通过光盘来安装操作系统,固然不会遇到什么问题,但是现在主流手段都是通过U盘来安装 ...
- [转] docker基础知识之挂载本地目录
[From] https://blog.csdn.net/huludan/article/details/52641090 https://my.oschina.net/piorcn/blog/324 ...
- Axis 生成客户端client stub文件
[转自] http://blog.csdn.net/qiao000_000/article/details/5568442 开发前,有个同事先给我们不熟悉Web Service的程序员进行了一些培训, ...
- Phyton Flask框架学习记录。
注意:在左侧菜单栏(在JQuery插件库下载的)右边是采用<iframe> 标签嵌入其他页面,此时标签的src应用用后台中的方法名称(本人测试用的是无参数的方法), 而页面跳转window ...
- Python 中下划线的 5 种含义
详细请参考这篇文章 单前导下划线:_var 单末尾下划线:var_ 双前导下划线:__var 双前导和末尾下划线:__var__ 单下划线:_
- Mastering the Game of Go 论文阅读笔记
主要思想:用状态评估减少搜索深度,用动作采样减少搜索宽度. 参考文献:https://blog.csdn.net/songrotek/article/details/51065143
- 如何透过上层div点击下层的元素解决方法
一.问题描述 笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是display:none的,但笔者发现登录框那一块区域的input框无法响应点击时间,也无法 ...