JavaScript+Flask 实现视频上传的简单demo

前言

需求说明

1. 在网页上选择本地视频并上传到后端服务器
2. 后端接收到视频后存储到本地，然后进行处理

技术栈：

前端采用原生HTML+JavaScript

后端采用Flask框架

前端代码

操作步骤：

1. 选中视频文件
2. 获取文件内容及文件名
3. 将文件内容和文件名封装到一个FormData对象中
4. 发起请求，将文件上传到后端服务器

完整代码如下：

有关FormData的使用参考：FormData 对象的使用 - Web API 接口参考 | MDN

  
    
    
    
  

  
    
    上传视频

    
  

后端代码

操作步骤：

1. 接收前端传来的请求参数
2. 根据文件名判断当前文件是否已经存在
3. 如果不存在则保存文件，如果存在则不进行任何操作

完整代码如下：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)  #允许所有来源的跨域请求

# 文件上传
@app.route('/upload',  methods=["POST"])
def upload():
    file = request.files['file'].stream.read() #视频文件
    name = request.form['name'] #文件名(注意是表单格式)
    print(video_exist(name))
    if not video_exist(name):
        # 保存视频文件到本地
        file_path = os.getcwd() + '\\videos\\' + name
        with open(file_path,'ab') as f:
            f.write(file)
        return '上传成功'
    else:
        return '文件已经存在'

# 判断文件是否存在
def video_exist(video_name):
    path = os.getcwd() + '\\videos\\'
    video_path = os.path.join(path,video_name)
    return os.path.isfile(video_path)
    
if __name__ == '__main__':
    app.run()

后续的视频处理可以考虑使用cv2来进行，例如通过cv2.VideoCapture(path)方法来读取指定路径的视频文件