<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. 关于Apache显示port 80 in use 无法解决的情况,这个世界对程序媛太不友好了

    学到Ajax时下载了Apache,百度的安装教程,配置文件参数分别是: 1. httpd.conf里的80改为8000或者其他的,共三处(用记事本打开,按ctrl+F找方便) 2. httpd-ssl ...

  2. [Beta阶段]第一次Scrum Meeting

    Scrum Meeting博客目录 [Beta阶段]第一次Scrum Meeting 基本信息 名称 时间 地点 时长 第一次Scrum Meeting 19/04/29 大运村寝室6楼 70min ...

  3. IDEA 在 专注模式下 显示 行号 和 缩进线...

    16down voteaccepted +50 Open the settings and navigate to Editor > General > Appearance and ti ...

  4. HDU - 1300 简单DP

    题意:买珠子的方案有两种,要么单独买,价钱为该种类数量+10乘上相应价格,要么多个种类的数量相加再+10乘上相应最高贵的价格买 坑点:排序会WA,喵喵喵? 为什么连续取就是dp的可行方案?我猜的.. ...

  5. Spring4 笔记

    1. 通过 xml 赋值给 bean 1) 通过set 方法赋值 (必须要有空的构造方法) <bean id="user" class="com.test.User ...

  6. [转] CSS 颜色名

    [From] http://www.w3school.com.cn/cssref/css_colornames.asp CSS 颜色名 所有浏览器都支持的颜色名. HTML 和 CSS 颜色规范中定义 ...

  7. 剑指offer——面试题15.1:判断一个数是否为2的整数次方

    #include"iostream" using namespace std; bool IsTwoPower(int n) { )&n); } int main() { ...

  8. PIE SDK导出图片

    1. 功能简介 导出图片功能可以将制图模板以及视图.绘制元素.制图元素等保存为图片.本示例程序实现了专题制图下导出图片功能. 2. 功能实现说明 2.1导出图片 2.2 实现思路及原理说明 调用IPa ...

  9. PIE SDK与Python结合说明文档

    1.功能简介 Python是一种跨平台语言.无论是在Windows.Linux.Unix还是Mac Os系统,我们都可以使用Python.甚至在Linux.Unix及Mac OS系统内已经集成了Pyt ...

  10. 解决Input number 框能够能够输入eeeeee 的问题

    onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 在input  type="n ...