vue+flask實作視頻合成
效果如下

歡迎訪問博客代碼哈士奇
技術聊天交流群 974178910
前端交流群 535620886

vue+flask實作視頻合成

拖拽上傳我們之前一個文章有寫過
上傳檔案
flask處理檔案
拼接獲取檔案路徑
- 首先我們看flask
- 前端獲取
- - 配置代理說明
額外說明(如果你使用uni-app)
完整代碼
- flask代碼
- - md5random.py 用于隨機字串生成
  - app_service.py 服務代碼
- vue代碼
- - 演示檔案代碼
  - vue.config.js

拖拽上傳我們之前一個文章有寫過

https://dmhsq.blog.csdn.net/article/details/114109519

原理就是監聽drop事件來獲取拖拽的檔案串列
在這里插入圖片描述

上傳檔案

通過axios 上傳檔案

this,.fileList就是我們的檔案串列

let files = this.fileList;
let formd = new FormData();
let i = 1;

//添加上傳串列
files.forEach(item => {
	formd.append(i + "", item, item.name)
	i++;
})
formd.append("type", i)
let config = {
	headers: {
		"Content-Type": "multipart/form-data"
	}
}

//上傳檔案請求
axios.post("/qwe", formd, config).then(res => {
	console.log(res.data)
})

flask處理檔案

完整代碼見最底部

邏輯如下
接收檔案
為每次合成請求隨機生成一個檔案夾臨時保存檔案
拼接視頻
回傳檔案路徑

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

    #獲取檔案
    files =  request.files
    #合成佇列
    videoL = []
    #隨機字串
    dirs = sjs()
    #生成檔案夾
    os.mkdir(dirs)
    #保存檔案并添加至合成佇列
    for file in files.values():
        print(file)
        dst = dirs + "/" + file.name + ".mp4"
        file.save(dst)
        video = VideoFileClip(dirs + "/" + file.name + ".mp4")
        videoL.append(video)
    
    #拼接視頻
    final = concatenate_videoclips(videoL)
    #檔案路徑
    fileName = dirs + "/" +"{}.mp4".format(sjs())
    #生成視頻
    final.to_videofile(fileName)
    
    #銷毀檔案夾
    def sc():
        shutil.rmtree(dirs)
    
    #30秒后銷毀檔案夾
    timer = threading.Timer(30, sc)
    timer.start()

    # 回傳檔案路徑
    return fileName

拼接獲取檔案路徑

首先我們看flask

邏輯如下
通過檔案名獲取檔案回傳檔案

@app.route("/getvoi",methods=['GET'])
def getImg():
    #獲取檔案名
    ss = request.args['name']
    #檔案加至回傳回應
    response = make_response(
        send_file(ss))

    #洗掉檔案
    def sc():
        os.remove(ss)
    
    #30秒后洗掉檔案
    timer = threading.Timer(30, sc)
    timer.start()
    
    return response

前端獲取

通過a標簽下載

<a s :href="herfs" :download="fileName">下載</a>

herfs如下
在這里插入圖片描述
我們上傳檔案后通過falsk處理回傳檔案路徑拼接后獲取檔案地址

a標簽添加download屬性可以給下載的檔案命名

如果你對/qwe /voi有疑惑請看下面的配置代理說明

配置代理說明

配置代理是為了解決跨域問題開發環境可在vue.config.js配置即可使用
生產環境需要額外配置nginx
在這里插入圖片描述 /qwe實際上就是 http://127.0.0.1:8087/file
/voi實際上就是 http://127.0.0.1:8087/getvoi
對應我們flask中的

在這里插入圖片描述

額外說明(如果你使用uni-app)

如果你使用uni-app 可參照檔案使用api
上傳檔案api https://uniapp.dcloud.io/api/request/network-file?id=uploadfile
下載檔案api https://uniapp.dcloud.io/api/request/network-file?id=downloadfile
或者直接使用別人封裝好的插件畢竟比較方便

完整代碼

如果你不想一個一個復制可以去下載
下載途徑1: https://download.csdn.net/download/qq_42027681/15561897
下載途徑2:https://github.com/dmhsq/vue-flask-videoSynthesis

flask代碼

md5random.py 用于隨機字串生成

import random
import hashlib
def sjs():
    a = random.randint(0, 100)
    a = "a" + str(a);
    b = random.randint(100, 10000);
    b = "b" + str(b);
    c = hashlib.md5(a.encode(encoding='UTF-8')).hexdigest() + hashlib.md5(b.encode(encoding='UTF-8')).hexdigest();
    c = "c" + str(c);
    d = random.randint(10, 100);
    d = "d" + str(d);
    e = hashlib.md5(c.encode(encoding='UTF-8')).hexdigest() + hashlib.md5(d.encode(encoding='UTF-8')).hexdigest();
    e = hashlib.md5(e.encode(encoding='UTF-8')).hexdigest()
    return e;

app_service.py 服務代碼

from flask import Flask,request,send_file,make_response
import os,json,threading,shutil
from moviepy.editor import *
from md5random import sjs

app = Flask(__name__)

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

    #獲取檔案
    files =  request.files
    #合成佇列
    videoL = []
    #隨機字串
    dirs = sjs()
    #生成檔案夾
    os.mkdir(dirs)
    #保存檔案并添加至合成佇列
    for file in files.values():
        print(file)
        dst = dirs + "/" + file.name + ".mp4"
        file.save(dst)
        video = VideoFileClip(dirs + "/" + file.name + ".mp4")
        videoL.append(video)

    #拼接視頻
    final = concatenate_videoclips(videoL)
    #檔案路徑
    fileName = dirs + "/" +"{}.mp4".format(sjs())
    #生成視頻
    final.to_videofile(fileName)

    #銷毀檔案夾
    def sc():
        shutil.rmtree(dirs)

    #30秒后銷毀檔案夾
    timer = threading.Timer(30, sc)
    timer.start()

    # 回傳檔案路徑
    return fileName


@app.route("/getvoi",methods=['GET'])
def getImg():
    #獲取檔案名
    ss = request.args['name']
    #檔案加至回傳回應
    response = make_response(
        send_file(ss))

    #洗掉檔案
    def sc():
        os.remove(ss)

    #30秒后洗掉檔案
    timer = threading.Timer(30, sc)
    timer.start()

    return response

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=8087)

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

    <el-button style="position: relative;top: 50px"  type="success" @click="ups()" :disabled="!isCan">合成</el-button>
    <el-button style="position: relative;top: 50px" v-loading="loading" type="success" >，，，</el-button>
    <a style="position: relative;top: 50px;left: 15px;" type="success" :href="herfs" :download="fileName"><el-button :disabled="isCans"><span style="color: black">下載</span></el-button></a>
    <div style="position: relative;top: 100px">檔案下載有效時間{{times}}s</div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "trs",
  data() {
    return {
      dt: "",//上傳提醒 "拖動到此處上傳檔案“或者"上傳完成，可繼續上傳"
      fileList: [],//檔案串列
      loading:false,
      srcs: "",//圖片/視頻/音頻 base64
      isImage: false,//是否是圖片
      isAudio: false,//是否是音頻
      isVideo: false,//是否是視頻
      isCan: true,//是否能合成
      isCans:true,//是否能下載
      herfs: "",//下載地址
      fileName: "",//檔案名
      times: 25//下載有效時間
    };
  },
  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(()=>{
        //
        // })
      };
    },
    //全域監聽drop的觸發事件 取消drop彈窗顯示資源
    testfunc(event) {
      alert("dragdrop!");

      //取消drop彈窗顯示資源
      event.stopPropagation();
      event.preventDefault();
    },
    del(index) {
      this.fileList.splice(index, 1);
      if (this.fileList.length === 0) {
        this.dt = "";
      }
    },
    //監聽div上傳框 當有檔案拖動時 顯示"拖動到此處上傳檔案"
    tts(e) {
      console.log(e);
      this.dt = "拖動到此處上傳檔案";
    },
    //監聽div上傳框 drop事件觸發
    ttrs(e) {
      console.log(e);
      console.log(e.dataTransfer.files);

      //獲取檔案
      let datas = e.dataTransfer.files;

      //取消drop彈窗顯示資源
      e.stopPropagation();
      e.preventDefault();
      datas.forEach(item => {
        if(item.type=="video/mp4"){
          this.fileList.push(item);
        }
      });

      //讀取檔案 如果不想展示圖片/視頻/音頻可忽略
      this.readFile(this.fileList[this.fileList.length - 1]);



      this.dt = "上傳完成，可繼續上傳";
    },

    //上傳檔案到服務器
    ups(){
      if(this.fileList.length==0){
        this.$message('檔案串列為空');
        return ;
      }
      this.loading = true;
      this.isCan = false;
      this.isCans = true;
      let files = this.fileList;
      let formd = new FormData();
      let i = 1;

      //添加上傳串列
      files.forEach(item=>{
        formd.append(i+"",item,item.name)
        i++;
      })
      formd.append("type",i)
      let config={
        headers:{"Content-Type":"multipart/form-data"}
      }

      //上傳檔案請求
      axios.post("/qwe",formd,config).then(res=>{
        console.log(res.data)
        this.loading = false
        //合成下載路徑
        this.herfs = "/voi?name="+res.data

        this.fileName = res.data.split('/')[1]
        //禁止合成
        this.isCan = false

        this.isCans = false

        //設定下載有效時間 時間到后無法下載但可以繼續合成
        let timer = setInterval(()=>{
          this.times--;
        },1000)
        this.setCans(timer)
      })
    },
    setCans(timer){
      setTimeout(()=>{
        this.isCans = true
        this.isCan = true
        this.fileName =""
        clearInterval(timer)
        this.times = 25
      },25000)
    }
  }
};
</script>

<style scoped></style>

vue.config.js

module.exports = {
  devServer: {
    // assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    proxy: {
      "/qwe": {
        target: "http://127.0.0.1:8087/file",
        changeOrigin: true,
        pathRewrite: {
          "^/qwe": ""
        }
      },
      "/voi": {
        target: "http://127.0.0.1:8087/getvoi",
        changeOrigin: true,
        pathRewrite: {
          "^/voi": ""
        }
      }
    }
  }
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/266390.html

標籤：其他

上一篇：jQuery.事件

下一篇：正則運算式必知必會

vue+flask實作視頻合成(拖拽上傳)