Vue implementiert Beispielcode zum Ziehen von Dateien vom Desktop auf eine Webseite (kann Bilder/Audio/Video anzeigen)

<Vorlage>
 <div>
  <div v-on:dragover="tts" v-on:drop="ttrs" style="Breite: 800px;Höhe: 200px;Rand: 1px durchgehend schwarz;Schriftgröße: 40px;Zeilenhöhe: 200px">
   {{dt}}
  </div>
  <div v-for="(item,index) in fileList" :key="index" style="Breite: 800px;Höhe: 200px;Rahmen: 1px durchgehend schwarz;Schriftgröße: 40px;Position: relativ;oben:10px">
   <p style="Schriftgröße: 20px;Float: links;Position: relativ;links: 20pxWortumbruch:Wortumbruch;Wortumbruch: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)">Löschen</button>
  </div>
 </div>
</Vorlage>

<Skript>
 Standard exportieren {
  Name: "trs",
  Daten(){
   zurückkehren {
    dt:"",
    Dateiliste:[]
   }
  },
  Filter:
   GrößeTyp(Wert){
    sei kbs = val/1024;
    sei mbs = 0;
    sei gbs = 0;
    wenn(kbs>=1024){
     mbs = kbs/1024;
    }
    wenn(mbs>=1024){
     GBS = MBS/1024
     gibt gbs.toFixed(2)+"GB" zurück;
    }sonst wenn (mbs>=1){
     return mbs.toFixed(2)+"MB"
    }anders {
     returniere kbs.toFixed(2)+"KB"
    }
   }
  },
  montiert() {
   lass vm = dies;
   window.addEventListener("dragdrop", this.testfunc, false);


   document.addEventListener("dragover",Funktion () {
    konsole.log(111)
    vm.dt = „Ziehen Sie hierhin, um Dateien hochzuladen“
    Konsole.log(vm.dt)
   })
  },
  Methoden:{
   testfunktion(Ereignis) {
    Warnung("Dragdrop!");
    event.stopPropagation();
    event.preventDefault();
   },
   del(index){
    diese.Dateiliste.splice(index,1)
    wenn(diese.fileList.length==0){
     dies.dt = ""
    }
   },
   tts(e){
    console.log(e)
    this.dt = "Hierher ziehen, um die Datei hochzuladen"
   },
   ttrs(e){
    console.log(e)
    console.log(e.dataTransfer.files)
    let datas = e.dataTransfer.files;
    Daten.fürJeden(Element=>{
     this.fileList.push(Element)
    })
    e.stopPropagation();
    e.preventDefault();
    this.dt = "Upload abgeschlossen, Sie können mit dem Hochladen fortfahren"

   }
  }
 }
</Skript>

<Stilbereich>

</Stil>

<Vorlage>
 <div>
 <div
  v-on:dragover="tts"
  v-on:drop="ttrs"
  Stil = "Breite: 800px; Höhe: 200px; Rahmen: 1px tiefschwarz; Schriftgröße: 40px; Zeilenhöhe: 200px"
 >
  {{ dt }}
 </div>
 <div
  v-for="(Element, Index) in Dateiliste"
  :Schlüssel="Index"
  Stil = "Breite: 800px; Höhe: 200px; Rahmen: 1px tief schwarz; Schriftgröße: 40px; Position: relativ; oben: 10px"
 >
  <p
  Stil = "Schriftgröße: 20px; Float: links; Position: relativ; links: 20px Zeilenumbruch: Wortumbruch; Wortumbruch: normal;"
  >
  {{ Artikelname }}
  </p>
  <h5 style="float:right;position: absolute;oben: 80px;rechts: 20px">
  {{ Artikeltyp }}
  </h5>
  <h6 style="position: absolute;oben: 80px;float: links;links: 20px">
  {{ Artikelgröße | Größentyp }}
  </h6>
  <button style="float: right" @click="del(index)">Löschen</button>
 </div>
 <div Stil="position:relative;oben: 100px">
  <img v-if="isImage" :src="srcs" style="width: 800px" />
  <video v-if="isVideo" steuert :src="srcs" style="width: 800px"></video>
  <audio v-if="isAudio" steuert :src="srcs" style="width: 800px"></audio>
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "trs",
 Daten() {
 zurückkehren {
  dt: "",
  Dateiliste: [],
  Quellen:"",
  istBild:false,
  isAudio:false,
  isVideo:false
 };
 },
 Filter:
 Größentyp(Wert) {
  sei kbs = val / 1024;
  sei mbs = 0;
  sei gbs = 0;
  wenn (kbs >= 1024) {
  mbs = kbs / 1024;
  }
  wenn (mbs >= 1024) {
  GB = MBS / 1024;
  return gbs.toFixed(2) + "GB";
  } sonst wenn (mbs >= 1) {
  return mbs.toFixed(2) + "MB";
  } anders {
  return kbs.toFixed(2) + "KB";
  }
 }
 },
 montiert() {
 lass vm = dies;
 window.addEventListener("dragdrop", this.testfunc, false);

 document.addEventListener("dragover", Funktion() {
  konsole.log(111);
  vm.dt = „Ziehen Sie hierher, um Dateien hochzuladen“;
  Konsole.log(vm.dt);
 });
 },
 Methoden: {
  Datei lesen(Datei){
   lass vm = dies;
   : Der Reader kann nicht mit anderen Dateien verbunden werden.
   reader.readAsDataURL(Datei)
   Leser.onload = Funktion () {
    lass Typ = Datei.Typ.substr(0,5);
    wenn(Typ=="Bild"){
     vm.isImage = true;
     vm.isAudio =false;
     vm.isVideo = falsch;
    }sonst wenn(Typ=="Audio"){
     vm.isImage = falsch;
     vm.isAudio = true;
     vm.isVideo = falsch;
    }sonst wenn(Typ=="Video"){
     vm.isImage = falsch;
     vm.isAudio = false;
     vm.isVideo = true;
    }anders {
     alert("Kein Bild/Video/Audio")
    }
    vm.srcs = Leser.Ergebnis;
    // dies.$nextTick(()=>{
    //
    // })
   }
  },
 testfunktion(Ereignis) {
  Warnung("Dragdrop!");
  event.stopPropagation();
  event.preventDefault();
 },
 del(index) {
  diese.fileList.splice(index, 1);
  wenn (diese.fileList.length === 0) {
  dies.dt = "";
  }
 },
 tts(e) {
  konsole.log(e);
  this.dt = "Hierher ziehen, um die Datei hochzuladen";
 },
 ttrs(e) {
  konsole.log(e);
  Konsole.log(e.dataTransfer.files);
  let datas = e.dataTransfer.files;
  datas.forEach(item => {
  diese.fileList.push(Element);
  });
  dies.readFile(diese.fileList[diese.fileList.length-1])

  e.stopPropagation();
  e.preventDefault();

  this.dt = "Upload abgeschlossen, Sie können mit dem Hochladen fortfahren";
 }
 }
};
</Skript>

<Stilbereich></Stil>