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

代码哈士奇 等级 653 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实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
VS Code 成主宰、Vue备受热捧!2020 前端开发趋势指南
关注  Vue中文社区 ,回复“ 加群 ” 加入我们一起学习,天天进步 ![](https://oscimg.oschina.net/oscnet/77b386be6377566a8ed7052613c58d1323d.jpg) 来源:CSDN 前端在生产和开发中占据着越来越重要的地位,PC
Vite使Vue CLI过时了吗?
![](https://oscimg.oschina.net/oscnet/b9aed6aa-9d14-4fd3-82b8-e1724221ee71.jpg) **文末福利资源更新** Vue生态系统中有一个名为Vite的新构建工具,它的开发服务器比Vue CLI快10-100倍。 这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
CodeMirror 在线代码编辑器
像百度编辑器插件部分、菜鸟教程示例等高德地图都在使用,这里也记录一下: CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件......vue 中使用 参见:https://www.npmjs.com/package/vue-codemirrorhttps://blog.csdn.net/oumaharuki/
React面试必问Fiber和Hooks,一次搞定
国内的前端领域,Vue 和 React 是最火的两个框架,要说岗位数量,Vue可能会更多一点。 但如果把公司范围缩小到大厂,或者把范围扩展到全球,那React无疑独占鳌头。 ![](https://oscimg.oschina.net/oscnet/ba57134c-6a7d-47d8-a317-7ad3976a1a77.jpg "2019年
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue 全家桶
vue全家桶。 使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计思想。相比Angular.js,Vue.js API更加简洁;
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa
vue
**Vue-router 报NavigationDuplicated的可能解决方案** 参考文章: [(1)Vue-router 报NavigationDuplicated的可能解决方案](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.codeprj.com%2Fblog%2F