vue+flask实现视频合成功能(拖拽上传)

2023-07-04 18:11:03 73

vue+flask实现视频合成
效果如下

拖拽上传我们之前一个文章有写过

//www.nhooo.com/article/206543.htm

原理就是监听drop事件来获取拖拽的文件列表

上传文件

通过axios上传文件

this,.fileList就是我们的文件列表

letfiles=this.fileList;
letformd=newFormData();
leti=1;

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

//上传文件请求
axios.post("/qwe",formd,config).then(res=>{
	console.log(res.data)
})

flask处理文件

完整代码见最底部

逻辑如下
接收文件
为每次合成请求随机生成一个文件夹临时保存文件
拼接视频
返回文件路径

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

#获取文件
files=request.files
#合成队列
videoL=[]
#随机字符串
dirs=sjs()
#生成文件夹
os.mkdir(dirs)
#保存文件并添加至合成队列
forfileinfiles.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)

#销毁文件夹
defsc():
shutil.rmtree(dirs)

#30秒后销毁文件夹
timer=threading.Timer(30,sc)
timer.start()

#返回文件路径
returnfileName

拼接获取文件路径

首先我们看flask

逻辑如下
通过文件名获取文件返回文件

app.route("/getvoi",methods=['GET'])
defgetImg():
#获取文件名
ss=request.args['name']
#文件加至返回响应
response=make_response(
send_file(ss))

#删除文件
defsc():
os.remove(ss)

#30秒后删除文件
timer=threading.Timer(30,sc)
timer.start()

returnresponse

前端获取

通过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
上传文件apihttps://uniapp.dcloud.io/api/request/network-file?id=uploadfile
下载文件apihttps://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用于随机字符串生成

importrandom
importhashlib
defsjs():
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()
returne;

app_service.py服务代码

fromflaskimportFlask,request,send_file,make_response
importos,json,threading,shutil
frommoviepy.editorimport*
frommd5randomimportsjs

app=Flask(__name__)

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

#获取文件
files=request.files
#合成队列
videoL=[]
#随机字符串
dirs=sjs()
#生成文件夹
os.mkdir(dirs)
#保存文件并添加至合成队列
forfileinfiles.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)

#销毁文件夹
defsc():
shutil.rmtree(dirs)

#30秒后销毁文件夹
timer=threading.Timer(30,sc)
timer.start()

#返回文件路径
returnfileName


@app.route("/getvoi",methods=['GET'])
defgetImg():
#获取文件名
ss=request.args['name']
#文件加至返回响应
response=make_response(
send_file(ss))

#删除文件
defsc():
os.remove(ss)

#30秒后删除文件
timer=threading.Timer(30,sc)
timer.start()

returnresponse

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

vue代码

演示文件代码

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":""
}
}
}
}
};

到此这篇关于vue+flask实现视频合成功能(拖拽上传)的文章就介绍到这了,更多相关vue视频合成内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。