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

    前言

    需求说明

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

    技术栈：

    前端采用原生HTML+JavaScript

    后端采用Flask框架

    前端代码

    操作步骤：

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

    完整代码如下：

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

    1. html>
    2. <html lang="en">
    3.  
    4.   <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>视频上传title>
    8.   head>
    9.  
    10.   <body>
    11.     <input type="file" id="video" accept="video/mp4">
    12.     <button onclick="upload()">上传视频button>
    13.  
    14.     <script>
    15.       function upload() {
    16.         let videoUpload = document.getElementById('video')
    17.         let video = videoUpload.files[0]
    18.  
    19.         let formData = new FormData()
    20.         formData.append('video', file) //文件
    21.         formData.append('name', file.name) //文件名
    22.  
    23.         let xhr = new XMLHttpRequest()
    24.         xhr.open('POST', 'http://10.241.4.160:5000/upload', true)
    25.         xhr.responseType = 'text' //响应类型
    26.         xhr.onload = function () {
    27.           if (xhr.status === 200) {
    28.             console.log(xhr.response); //响应内容 (上传成功/文件已存在)
    29.           } else {
    30.             console.error('请求失败，状态码：' + xhr.status);
    31.           }
    32.         };
    33.         xhr.send(formData)
    34.       }
    35.     script>
    36.   body>
    37. html>

    后端代码

    操作步骤：

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

    完整代码如下：

    1. from flask import Flask, request, jsonify
    2. from flask_cors import CORS
    3.  
    4. app = Flask(__name__)
    5. CORS(app, supports_credentials=True)  #允许所有来源的跨域请求
    6.  
    7. # 文件上传
    8. @app.route('/upload',  methods=["POST"])
    9. def upload():
    10.     file = request.files['file'].stream.read() #视频文件
    11.     name = request.form['name'] #文件名(注意是表单格式)
    12.     print(video_exist(name))
    13.     if not video_exist(name):
    14.         # 保存视频文件到本地
    15.         file_path = os.getcwd() + '\\videos\\' + name
    16.         with open(file_path,'ab') as f:
    17.             f.write(file)
    18.         return '上传成功'
    19.     else:
    20.         return '文件已经存在'
    21.  
    22. # 判断文件是否存在
    23. def video_exist(video_name):
    24.     path = os.getcwd() + '\\videos\\'
    25.     video_path = os.path.join(path,video_name)
    26.     return os.path.isfile(video_path)
    27.     
    28. if __name__ == '__main__':
    29.     app.run()

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

  • 相关阅读:
    [附源码]计算机毕业设计JAVA 停车场管理系统
    vue安装和卸载依赖包package.json
    HCIA实验（07）
    【数据结构】排序(2)—冒泡排序 & 快速排序
    cv面试百问day2
    java计算机毕业设计网上商城系统演示录像源码+系统+数据库+lw文档+mybatis+运行部署
    Nginx：http自动跳转到https
    基于PSO算法的功率角摆动曲线优化研究（Matlab代码实现）
    Apache Derby的使用
    线性代数_第二章，矩阵
  • 原文地址：https://blog.csdn.net/qq_51235856/article/details/134233554