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

代码哈士奇 等级 355 0 0

效果 vue实现桌面向网页拖动文件(可显示图片/音频/视频))>vue实现桌面向网页拖动文件(可显示图片/音频/视频) 欢迎访问博客代码哈士奇

技术 聊天 交流群 974178910 前端交流群 535620886

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

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

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




欢迎访问博客代码哈士奇

技术 聊天 交流群 974178910 前端交流群 535620886

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
前端 滚动到目标元素位置 VUE 版本
1、前言 想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。 2、先看效果 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.c
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
vue-生命周期
vue生命周期 即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁 创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destroye
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d