Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)

let Dateien = diese.Dateiliste;
let formd = neue FormData();
sei i = 1;

//Upload-Liste hinzufügen files.forEach(item => {
	formd.append(i + "", Artikel, Artikelname)
	ich++;
})
formd.append("Typ", i)
let konfiguration = {
	Überschriften: {
		"Inhaltstyp": "multipart/Formulardaten"
	}
}

//Dateianforderung hochladen axios.post("/qwe", formd, config).then(res => {
	konsole.log(res.daten)
})

@app.route("/Datei",Methoden=['POST'])
def test():

 #Dateien abrufen files = request.files
 #Synthese-Warteschlange videoL = []
 #Zufällige Zeichenfolge dirs = sjs()
 #Ordner os.mkdir(dirs) generieren
 #Speichern Sie die Datei und fügen Sie sie der Synthesewarteschlange für Dateien in files.values() hinzu:
  drucken(Datei)
  dst = Verzeichnisse + "/" + Dateiname + ".mp4"
  Datei.Speichern(Ziel)
  Video = VideoFileClip(Verzeichnisse + "/" + Dateiname + ".mp4")
  videoL.anhängen(video)
 
 #Video zusammenfügen final = Videoclips verketten(videoL)
 #Dateipfad Dateiname = Verzeichnisse + "/" + "{}.mp4".format(sjs())
 #Video generieren final.to_videofile(Dateiname)
 
 #Ordner zerstören def sc():
  shutil.rmtree(Verzeichnisse)
 
 #Zerstöre den Ordner nach 30 Sekunden Timer = threading.Timer(30, sc)
 timer.start()

 # Gibt den Dateipfad zurück return fileName

app.route("/getvoi",Methoden=['GET'])
def getImg():
 #Dateinamen abrufen ss = request.args['name']
 #Fügen Sie die Datei der zurückgegebenen Antwort hinzu response = make_response(
  sende_datei(ss)

 #Datei löschen def sc():
  os.entfernen(ss)
 
 #Löschen Sie die Datei nach 30 Sekunden Timer = threading.Timer(30, sc)
 timer.start()
 
 Antwort zurückgeben

<as :href="herfs" rel="external nofollow" rel="external nofollow" :download="fileName">Herunterladen</a>

zufällig importieren
Hashlib importieren
def sjs():
 a = Zufallszahl.randint(0, 100)
 a = "a" + str(a);
 b = zufällig.randint(100, 10000);
 b = "b" + str(b);
 c = hashlib.md5(a.encode(Kodierung='UTF-8')).hexdigest() + hashlib.md5(b.encode(Kodierung='UTF-8')).hexdigest();
 c = "c" + str(c);
 d = Zufall.randint(10, 100);
 d = "d" + str(d);
 e = hashlib.md5(c.encode(Kodierung='UTF-8')).hexdigest() + hashlib.md5(d.encode(Kodierung='UTF-8')).hexdigest();
 e = hashlib.md5(e.encode(Kodierung='UTF-8')).hexdigest()
 Rückkehr e;

aus Flask importiere Flask, Anfrage, Datei senden, Antwort erstellen
Betriebssystem, JSON, Threading, Shutil importieren
vom moviepy.editor importieren *
von md5random importiere sjs

App = Flask(__name__)

@app.route("/Datei",Methoden=['POST'])
def test():

 #Dateien abrufen files = request.files
 #Synthese-Warteschlange videoL = []
 #Zufällige Zeichenfolge dirs = sjs()
 #Ordner os.mkdir(dirs) generieren
 #Speichern Sie die Datei und fügen Sie sie der Synthesewarteschlange für Dateien in files.values() hinzu:
  drucken(Datei)
  dst = Verzeichnisse + "/" + Dateiname + ".mp4"
  Datei.Speichern(Ziel)
  Video = VideoFileClip(Verzeichnisse + "/" + Dateiname + ".mp4")
  videoL.anhängen(video)

 #Video zusammenfügen final = Videoclips verketten(videoL)
 #Dateipfad Dateiname = Verzeichnisse + "/" + "{}.mp4".format(sjs())
 #Video generieren final.to_videofile(Dateiname)

 #Ordner zerstören def sc():
  shutil.rmtree(Verzeichnisse)

 #Zerstöre den Ordner nach 30 Sekunden Timer = threading.Timer(30, sc)
 timer.start()

 # Gibt den Dateipfad zurück return fileName


@app.route("/getvoi",Methoden=['GET'])
def getImg():
 #Dateinamen abrufen ss = request.args['name']
 #Fügen Sie die Datei der zurückgegebenen Antwort hinzu response = make_response(
  sende_datei(ss)

 #Datei löschen def sc():
  os.entfernen(ss)

 #Löschen Sie die Datei nach 30 Sekunden Timer = threading.Timer(30, sc)
 timer.start()

 Antwort zurückgeben

wenn __name__ == '__main__':
 app.run(Host='0.0.0.0',Port=8087)

<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>
 <!-- Hier wird die zuletzt hochgeladene Datei angezeigt-->
<!-- <div style="position:relative;top: 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>-->

 <el-button style="position: relative;top: 50px" type="success" @click="ups()" :disabled="!isCan">Synthese</el-button>
 <el-button style="position: relative;top: 50px" v-loading="wird geladen" type="success" >. . . </el-button>
 <a style="position: relative;top: 50px;left: 15px;" type="success" :href="herfs" rel="external nofollow" rel="external nofollow" :download="fileName"><el-button :disabled="isCans"><span style="color: black">Herunterladen</span></el-button></a>
 <div style="position: relative;top: 100px">Gültigkeitsdauer des Dateidownloads {{times}}s</div>
 </div>
</Vorlage>

<Skript>
importiere Axios von „Axios“;

Standard exportieren {
 Name: "trs",
 Daten() {
 zurückkehren {
  dt: "", //Upload-Erinnerung „Ziehen Sie hierhin, um die Datei hochzuladen“ oder „Upload abgeschlossen, Sie können mit dem Hochladen fortfahren“
  fileList: [], // Dateiliste wird geladen: false,
  srcs: "", //Bild/Video/Audio base64
  isImage: false, //Ist es ein Bild? isAudio: false, //Ist es eine Audiodatei? isVideo: false, //Ist es ein Video? isCan: true, //Kann es synthetisiert werden? isCans: true, //Kann es heruntergeladen werden? herfs: "", //Download-Adresse fileName: "", //Dateiname times: 25 //Gültigkeitsdauer des Downloads };
 },
 Filter:
 //Dateigröße formatieren sizeType(val) {
  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);

 //Globale Überwachung, wenn auf der Seite eine Erinnerung zum Ziehen von Dateien vorhanden ist. Hierher ziehen. document.addEventListener("dragover", function() {
  konsole.log(111);
  vm.dt = „Ziehen Sie hierher, um Dateien hochzuladen“;
  Konsole.log(vm.dt);
 });
 },
 Methoden: {
 //Es gibt hauptsächlich drei Arten von Anzeigedateien: Bild/Video/Audio readFile(file) {
  lass vm = dies;
  : Der Reader kann nicht mit anderen Dateien verbunden werden.
  reader.readAsDataURL(Datei);
  Leser.onload = Funktion() {
  let Typ = Datei.Typ.substr(0, 5);
  wenn (Typ == "Bild") {
   vm.isImage = true;
   vm.isAudio = falsch;
   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(()=>{
  //
  // })
  };
 },
 //Überwache global das Triggerereignis von Drop, um die Anzeige des Drop-Popup-Fensters abzubrechen resource testfunc(event) {
  Warnung("Dragdrop!");

  //Stornieren Sie die Anzeigeressource für das Drop-Popup-Fenster event.stopPropagation();
  event.preventDefault();
 },
 del(index) {
  diese.fileList.splice(index, 1);
  wenn (diese.fileList.length === 0) {
  dies.dt = "";
  }
 },
 //Überwachen Sie das Div-Upload-Feld und zeigen Sie „Ziehen Sie hierhin, um die Datei hochzuladen“ an, wenn eine Datei gezogen wird
 tts(e) {
  konsole.log(e);
  this.dt = "Hierher ziehen, um die Datei hochzuladen";
 },
 //Achten Sie auf das Drop-Ereignis der Div-Upload-Box, um ttrs(e) auszulösen {
  konsole.log(e);
  Konsole.log(e.dataTransfer.files);

  //Dateien abrufen let datas = e.dataTransfer.files;

  //Anzeige des Drop-Popup-Fensters abbrechen Ressource e.stopPropagation();
  e.preventDefault();
  datas.forEach(item => {
  wenn(item.type=="video/mp4"){
   diese.fileList.push(Element);
  }
  });

  //Dateien lesen. Wenn Sie keine Bilder/Videos/Audios anzeigen möchten, können Sie this.readFile(this.fileList[this.fileList.length - 1]); ignorieren.



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

 //Dateien auf den Server hochladen ups(){
  wenn(diese.fileList.length==0){
  this.$message('Die Dateiliste ist leer');
  zurückkehren ;
  }
  dies.laden = wahr;
  dies.isCan = falsch;
  dies.isCans = wahr;
  let Dateien = diese.Dateiliste;
  let formd = neue FormData();
  sei i = 1;

  //Upload-Liste hinzufügen files.forEach(item=>{
  formd.append(i+"",Artikel,Artikelname)
  ich++;
  })
  formd.append("Typ",i)
  let config={
  Überschriften: {"Inhaltstyp":"multipart/form-data"}
  }

  //Dateianforderung hochladen axios.post("/qwe",formd,config).then(res=>{
  konsole.log(res.daten)
  dies.laden = falsch
  //Synthetisierter Download-Pfad this.herfs = "/voi?name="+res.data

  dieser.Dateiname = res.data.split('/')[1]
  //Synthese ist verboten this.isCan = false

  this.isCans = falsch

  //Legen Sie die Gültigkeitsdauer des Downloads fest. Nach Ablauf der Zeit kann der Download nicht abgeschlossen werden, aber die Synthese kann fortgesetzt werden. let timer = setInterval(()=>{
   dieses.Mal--;
  },1000)
  dies.setCans(Timer)
  })
 },
 setzeDosen(Timer){
  setzeTimeout(()=>{
  this.isCans = wahr
  dies.isCan = true
  dieser.Dateiname = ""
  Intervall löschen(Timer)
  dies.mal = 25
  },25000)
 }
 }
};
</Skript>

<Stilbereich></Stil>

modul.exporte = {
 devServer: {
 // AssetsSubDirectory: "statisch",
 // öffentlicher Assets-Path: '/',
 Proxy: {
  "/qwe": {
  Ziel: "http://127.0.0.1:8087/Datei",
  changeOrigin: wahr,
  PfadNeu schreiben: {
   "^/qwe": ""
  }
  },
  "/voi": {
  Ziel: "http://127.0.0.1:8087/getvoi",
  changeOrigin: wahr,
  PfadNeu schreiben: {
   "^/voi": ""
  }
  }
 }
 }
};