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拖动文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue实现带进度条的文件拖动上传功能

    1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

  • vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

    今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了: 搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享,下面直接上代码: 只能慢速拖动的代码: <!DOCTYPE html> <html> <head> <title>vue结合原生js实现拖动</title> <script src="https://cdn.bootcss.com/v

  • Vue.js实现图片的随意拖动方法

    主要代码如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <s

  • 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>

  • vue实现在线预览office文件的示例代码

    最近在做电子档案,后端提供了文件的华为云的oss链接.已经实现了点击下载文件的功能.但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载. 按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定. 顶不住第三方基本上是要money的.那不想掏money,还有什么解决方法呢. 方法一 用微软的office online进行在线预览 https://view.officeapps.live.com/op/view.aspx?src=文件地址 例:https

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • Vue实现点击按钮下载文件的操作代码(后端Java)

    上篇文章给大家介绍过vue实现点击按钮下载文件功能,今天继续vue点击按钮下载文件的话题. 最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想要的. 因为不确定文件是哪种类型的,所以我们在保存文件到数据库的时候,应该把文件的 Content-Type 一起存入,这样从数据库取出返回前端的时候,带上 Content-Type 标识是哪种类型的文件,前

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • vue全局挂载实现APP全局弹窗的示例代码

    目录 需求背景 需求分析 代码展示 需求背景 app端对接网页端的客服系统,在用户实现网页客户系统发起询问时,app不论在哪个页面都需要弹窗提示 需求分析 这个需求分为两步,一个是负责双向实时通信,一个是全局显示.双向实时通信我们可以利用socket来实现,具体内容不展开(后续看情况再出一篇),本文主要讲全局显示. 代码展示 首先是写个弹窗组件,这里给出个demo.如下 <template> <view class="transferPopup-wrap" style

  • vue中el-upload上传图片到七牛的示例代码

    一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

  • vue ssr+koa2构建服务端渲染的示例代码

    之前做了活动投放页面在百度.360等渠道投放,采用 koa2 + 模版引擎的方式.发现几个问题 相较于框架开发页面效率较低,维护性差 兼容性问题,在页面中添加埋点后发现有些用户的数据拿不到,排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器. 服务端渲染 服务端渲染和单页面渲染区别 查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的 html 结构.而单页面是一些 script 标签引入的js文件,最终将虚拟dom去挂在到 #app 容器上. @vue/c

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

随机推荐