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

代码哈士奇
• 阅读 948

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

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue