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

这篇文章主要介绍了vue+flask实现视频合成功能(拖拽上传),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

vue+flask实现视频合成

效果如下

原理就是 监听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?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 randomimport hashlibdef 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;

from flask import Flask,request,send_file,make_responseimport os,json,threading,shutilfrom moviepy.editor import *from md5random import sjsapp = Flask(__name__)@app.route("/file",methods=['POST&#