上传的简单demo"/>
JavaScript+Flask 实现视频上传的简单demo
前言
需求说明
- 在网页上选择本地视频并上传到后端服务器
- 后端接收到视频后存储到本地，然后进行处理
技术栈：
前端采用原生HTML+JavaScript
后端采用Flask框架
前端代码
操作步骤：
- 选中视频文件
- 获取文件内容及文件名
- 将文件内容和文件名封装到一个FormData对象中
- 发起请求，将文件上传到后端服务器
完整代码如下：
有关FormData的使用参考：FormData 对象的使用 - Web API 接口参考 | MDN
<!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>后端代码
操作步骤：
- 接收前端传来的请求参数
- 根据文件名判断当前文件是否已经存在
- 如果不存在则保存文件，如果存在则不进行任何操作
完整代码如下：
from flask import Flask, request, jsonify
from flask_cors import CORSapp = 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\\' + namewith 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)方法来读取指定路径的视频文件
更多推荐
JavaScript+Flask 实现视频上传的简单demo
发布评论