vue+flask实现视频合成
效果如下
拖拽上传我们之前一个文章有写过
//www.jb51.net/article/206543.htm
原理就是 监听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" rel="external nofollow" rel="external nofollow" :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"htmlcode">
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="/UploadFiles/2021-04-02/srcs">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": "" } } } } };
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月13日
2024年11月13日
- 梁咏琪.1996-爱自己【EEI】【WAV+CUE】
- IGN经典逆天骚操作名著——《墙头草修炼手册》
- 突然爆火的“网红游戏”,真的有那么多人玩吗?
- 何老师客串《浪人崛起》了?盘点与明星撞脸的角色!
- 【原神】关于星鹫赤羽对珐芙琴班配队下珐露珊主C的适配度分析
- 【原神】V5.1攻略 | 迪西雅角色简评
- 【原神】大日御舆顶端怎么上去
- 胥拉齐《感谢有你》DTS-WAV
- 罗海英《金牌歌后》【WAV+CUE】
- 林叶《林叶·夜》【WAV/分轨】
- 群星《国语经典名曲01》音乐磁场系列[WAV+CUE][1G]
- 齐豫《滚石24K》24K金碟珍藏版系列[低速原抓WAV+分轨][1G]
- 齐秦《齐秦[三洋母带] 》1:1母盘直刻限量版[WAV分轨][1G]
- 英雄联盟双城之战第二季在哪里看 双城之战第二季观看地址分享
- 宝可梦大集结公测耿鬼怎么获取 耿鬼获取方法一览