vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻)

更新時間：2021年03月01日 11:52:24 作者：代碼哈士奇

這篇文章主要介紹了vue實現(xiàn)桌面向網(wǎng)頁拖動文件的示例代碼(可顯示圖片/音頻/視頻),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

效果

在這里插入圖片描述

若使用請自行優(yōu)化代碼和樣式

不顯示圖片/播放視頻音頻代碼如下

<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 = "上傳完成，可繼續(xù)上傳"

   }
  }
 }
</script>

<style scoped>

</style>

如果想要顯示圖片/播放視頻/播放音頻

這里我默認顯示/播放最后一個上傳文件根據(jù)需求修改即可

<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 = "上傳完成，可繼續(xù)上傳";
 }
 }
};
</script>

<style scoped></style>

到此這篇關(guān)于vue實現(xiàn)桌面向網(wǎng)頁拖動文件(可顯示圖片/音頻/視頻)的文章就介紹到這了,更多相關(guān)vue拖動文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: