欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-13 08:18:54
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>





欢迎访问博客代码哈士奇

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

本文地址:https://blog.csdn.net/qq_42027681/article/details/114109519