vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)


Posted in Vue.js onMarch 01, 2021

效果

vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

若使用 请自行优化代码和样式

不显示图片/播放视频音频代码如下

<template>
 <div>
  <div v-on:dragover="tts" v-on:drop="ttrs" style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;line-height: 200px">
   {{dt}}
  </div>
  <div v-for="(item,index) in fileList" :key="index" style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;position: relative;top:10px">
   <p style="font-size: 20px;float: left;position: relative;left: 20pxword-wrap:break-word;word-break:normal;">{{item.name}}</p>
   <h5 style="float:right;position: absolute;top: 80px;right: 20px">{{item.type}}</h5>
   <h6 style="position: absolute;top: 80px;float: left;left: 20px">{{item.size | sizeType}}</h6>
   <button style="float: right" @click="del(index)">删除</button>
  </div>
 </div>
</template>

<script>
 export default {
  name: "trs",
  data(){
   return{
    dt:"",
    fileList:[]
   }
  },
  filters:{
   sizeType(val){
    let kbs = val/1024;
    let mbs = 0;
    let gbs = 0;
    if(kbs>=1024){
     mbs = kbs/1024;
    }
    if(mbs>=1024){
     gbs=mbs/1024
     return gbs.toFixed(2)+"GB";
    }else if (mbs>=1){
     return mbs.toFixed(2)+"MB"
    }else {
     return kbs.toFixed(2)+"KB"
    }
   }
  },
  mounted() {
   let vm = this;
   window.addEventListener("dragdrop", this.testfunc, false);


   document.addEventListener("dragover",function () {
    console.log(111)
    vm.dt = "拖动到此处上传文件"
    console.log(vm.dt)
   })
  },
  methods:{
   testfunc(event) {
    alert("dragdrop!");
    event.stopPropagation();
    event.preventDefault();
   },
   del(index){
    this.fileList.splice(index,1)
    if(this.fileList.length==0){
     this.dt = ""
    }
   },
   tts(e){
    console.log(e)
    this.dt = "拖动到此处上传文件"
   },
   ttrs(e){
    console.log(e)
    console.log(e.dataTransfer.files)
    let datas = e.dataTransfer.files;
    datas.forEach(item=>{
     this.fileList.push(item)
    })
    e.stopPropagation();
    e.preventDefault();
    this.dt = "上传完成,可继续上传"

   }
  }
 }
</script>

<style scoped>

</style>

如果想要显示图片/播放视频/播放音频

这里我默认显示/播放最后一个上传文件 根据需求修改即可

<template>
 <div>
 <div
  v-on:dragover="tts"
  v-on:drop="ttrs"
  style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;line-height: 200px"
 >
  {{ dt }}
 </div>
 <div
  v-for="(item, index) in fileList"
  :key="index"
  style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;position: relative;top:10px"
 >
  <p
  style="font-size: 20px;float: left;position: relative;left: 20pxword-wrap:break-word;word-break:normal;"
  >
  {{ item.name }}
  </p>
  <h5 style="float:right;position: absolute;top: 80px;right: 20px">
  {{ item.type }}
  </h5>
  <h6 style="position: absolute;top: 80px;float: left;left: 20px">
  {{ item.size | sizeType }}
  </h6>
  <button style="float: right" @click="del(index)">删除</button>
 </div>
 <div style="position:relative;top: 100px">
  <img v-if="isImage" :src="srcs" style="width: 800px" />
  <video v-if="isVideo" controls :src="srcs" style="width: 800px"></video>
  <audio v-if="isAudio" controls :src="srcs" style="width: 800px"></audio>
 </div>
 </div>
</template>

<script>
export default {
 name: "trs",
 data() {
 return {
  dt: "",
  fileList: [],
  srcs:"",
  isImage:false,
  isAudio:false,
  isVideo:false
 };
 },
 filters: {
 sizeType(val) {
  let kbs = val / 1024;
  let mbs = 0;
  let gbs = 0;
  if (kbs >= 1024) {
  mbs = kbs / 1024;
  }
  if (mbs >= 1024) {
  gbs = mbs / 1024;
  return gbs.toFixed(2) + "GB";
  } else if (mbs >= 1) {
  return mbs.toFixed(2) + "MB";
  } else {
  return kbs.toFixed(2) + "KB";
  }
 }
 },
 mounted() {
 let vm = this;
 window.addEventListener("dragdrop", this.testfunc, false);

 document.addEventListener("dragover", function() {
  console.log(111);
  vm.dt = "拖动到此处上传文件";
  console.log(vm.dt);
 });
 },
 methods: {
  readFile(file){
   let vm = this;
   let reader = new FileReader();
   reader.readAsDataURL(file)
   reader.onload = function () {
    let type = file.type.substr(0,5);
    if(type=="image"){
     vm.isImage = true;
     vm.isAudio =false;
     vm.isVideo = false;
    }else if(type=="audio"){
     vm.isImage = false;
     vm.isAudio =true;
     vm.isVideo = false;
    }else if(type=="video"){
     vm.isImage = false;
     vm.isAudio = false;
     vm.isVideo = true;
    }else {
     alert("不是图片/视频/音频")
    }
    vm.srcs = reader.result;
    // this.$nextTick(()=>{
    //
    // })
   }
  },
 testfunc(event) {
  alert("dragdrop!");
  event.stopPropagation();
  event.preventDefault();
 },
 del(index) {
  this.fileList.splice(index, 1);
  if (this.fileList.length === 0) {
  this.dt = "";
  }
 },
 tts(e) {
  console.log(e);
  this.dt = "拖动到此处上传文件";
 },
 ttrs(e) {
  console.log(e);
  console.log(e.dataTransfer.files);
  let datas = e.dataTransfer.files;
  datas.forEach(item => {
  this.fileList.push(item);
  });
  this.readFile(this.fileList[this.fileList.length-1])

  e.stopPropagation();
  e.preventDefault();

  this.dt = "上传完成,可继续上传";
 }
 }
};
</script>

<style scoped></style>

到此这篇关于vue实现桌面向网页拖动文件(可显示图片/音频/视频)的文章就介绍到这了,更多相关vue拖动文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue在图片上传的时候压缩图片
Nov 18 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue实现登录功能
Dec 31 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 #Vue.js
vue-router懒加载的3种方式汇总
Feb 28 #Vue.js
Vue SPA 首屏优化方案
Feb 26 #Vue.js
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
QML用PathView实现轮播图
2020/06/03 Python
Python实现GIF图倒放
2020/07/16 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
毕业生文员求职信
2013/11/03 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python