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 ...
随机推荐
- js new关键字 和 this详解
构造函数 ,是一种特殊的函数.主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中. 构造函数用于创建一类对象,首字母要大写. 构造函数要和new一起 ...
- Linux下指定线程的名字
为了能方便的区分一个进程中的每个线程,可以通过prctl()给每个线程取个名字.这样在会创建多个线程的程序执行过程中,就能知道一个pid或tid对应的是哪个线程,对调试程序有一定帮助. prctl是个 ...
- iOS开发时间戳与时间NSDate,时区的转换,汉字与UTF8,16进制的转换
http://blog.sina.com.cn/s/blog_68661bd80101njdo.html 标签: ios时间戳 ios开发时间戳 ios16进制转中文 ios开发utf8转中文 ios ...
- Spring学习笔记(一)—— Spring介绍及入门案例
一.Spring概述 1.1 Spring是什么 Spring是一个开源框架,是于2003年兴起的一个轻量级的Java开发框架, 由Rod Johnson 在其著作<Expert one on ...
- Android 对话框的应用1
1.介绍 2.作用 (1)消息提示对话框 (2)简单列表对话框 (3)单选列表对话框 (4)多选对话框 (5)自定义对话框 3.java后台代码 package com.lucky.test28dia ...
- PHP 位运算符
位运算符 位运算符是指对二进制位从低位到高位对齐后进行运算. 符号 作用 举例 个人理解 & 按位与 $m & $n 全1为1,否则为0 | 按位或 $m | $n 全0为0,有1为1 ...
- C++_代码重用2-包含对象成员的类
对于姓名可以使用字符数组来表示,但这将限制姓名的长度.当然,还可以使用char指针和动态内存分配,但这要求提供大量的支持代码.有一个好的方法就是使用一个他人开发好的类的对象来表示.如果C++库提供了合 ...
- Python 实现 ZoomEye API SDK
版权声明:未经作者授权,禁止转载! ZoomEye想必大家都很熟悉,自从官方开放了API,网上各种版本的SDK乱飞.今天我也来发一个自己写的. 首先我们从https://github.com/SEC0 ...
- [转] 商业应用中Java浮点数的精确计算及表示
[From] https://blog.csdn.net/stevene/article/details/586089 问题提出 (1).浮点数精确计算 胜利油田三流合一项目中一直存在一个问题,就是每 ...
- Oracle列转行函数Listagg以及pivot查询示例
简单的Oracle列转行函数Listagg示例: CREATE TABLE tbl_test (catalog VARCHAR(1),product VARCHAR(2),amount NUMBER) ...