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

前言

需求说明

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

技术栈:

前端采用原生HTML+JavaScript

后端采用Flask框架

前端代码

操作步骤:

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

完整代码如下:

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

html 复制代码
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频上传</title>
  </head>

  <body>
    <input type="file" id="video" accept="video/mp4">
    <button onclick="upload()">上传视频</button>

    <script>
      function upload() {
        let videoUpload = document.getElementById('video')
        let video = videoUpload.files[0]

        let formData = new FormData()
        formData.append('video', file) //文件
        formData.append('name', file.name) //文件名

        let xhr = new XMLHttpRequest()
        xhr.open('POST', 'http://10.241.4.160:5000/upload', true)
        xhr.responseType = 'text' //响应类型
        xhr.onload = function () {
          if (xhr.status === 200) {
            console.log(xhr.response); //响应内容 (上传成功/文件已存在)
          } else {
            console.error('请求失败,状态码:' + xhr.status);
          }
        };
        xhr.send(formData)
      }
    </script>
  </body>
</html>

后端代码

操作步骤:

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

完整代码如下:

python 复制代码
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)**方法来读取指定路径的视频文件

相关推荐
quitv21 分钟前
react脚手架配置别名
前端·javascript·react.js
余~~1853816280033 分钟前
矩阵碰一碰发视频源码搭建之,支持OEM
线性代数·矩阵·音视频
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
LittleNyima8 小时前
【代码解读】阿里最新开源视频生成模型 Wan 2.1 实现解析
人工智能·stable diffusion·aigc·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
java1234_小锋10 小时前
一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用
python·flask·flask3
图书馆钉子户11 小时前
from flask_session import Session 为什么是Session(app)这么用?
python·flask·mybatis