本教程详细介绍了如何将通过JavaScript在浏览器中录制的视频文件，通过Fetch API异步上传至Django后端。内容涵盖了客户端JavaScript如何处理视频Blob、构建FormData并携带CSRF令牌发送请求，以及Django后端如何接收文件、保存至数据库并返回JSON响应。旨在提供一个高效、无缝的视频上传解决方案。
1. 概述
在现代web应用中，用户直接在浏览器中录制视频并上传至服务器的需求日益增长。传统的表单提交方式在处理这类二进制大文件时，往往会导致页面刷新或用户体验不佳。本文将介绍一种结合javascript的mediarecorder api进行视频录制，并通过fetch api将录制好的视频数据异步上传至django后端存储的专业方法。此方案避免了手动下载再上传的繁琐步骤，实现了流畅的用户体验。
2. 前端视频录制与上传机制
2.1 视频录制基础
前端通过navigator.mediaDevices.getUserMedia获取用户媒体流，并使用MediaRecorder API进行视频录制。录制过程中，视频数据会以Blob的形式分块收集。当录制停止时，这些Blob可以合并成一个完整的视频Blob。
核心JavaScript录制逻辑（简化）:
let mediaRecorder;let recordedBlobs; // 存储录制的数据块// ... 省略初始化和启动MediaRecorder的代码 ...function handleDataAvailable(event) { if (event.data && event.data.size > 0) { recordedBlobs.push(event.data); // 收集数据块 }}function startRecording() { recordedBlobs = []; // ... 配置MediaRecorder并启动 ... mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start();}function stopRecording() { mediaRecorder.stop(); // 此时 recordedBlobs 包含了完整的视频数据}
2.2 使用Fetch API上传视频
录制完成后，我们需要将recordedBlobs合并成一个完整的视频Blob，并将其作为文件通过Fetch API发送到Django后端。
2.2.1 获取CSRF令牌
Django为了防止跨站请求伪造（CSRF），要求所有POST请求都必须包含一个CSRF令牌。在AJAX请求中，我们需要从Cookie中获取该令牌并将其作为请求头发送。
立即学习“Java免费学习笔记（深入）”；
function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift();}
2.2.2 构建FormData并发送请求
FormData接口提供了一种表示表单数据的方法，特别适用于通过Fetch API发送文件。我们将视频Blob封装成一个File对象，然后添加到FormData中。
async function uploadVideo(videoBlob) { const formData = new FormData(); // 将Blob转换为File对象，并指定文件名和MIME类型 formData.append("video", new File([videoBlob], 'my-interview.mp4', { type: 'video/mp4' })); try { const response = await fetch("/video-app/", { // 确保URL正确指向Django视图 method: "POST", headers: { "X-CSRFToken": getCookie('csrftoken'), // 添加CSRF令牌 }, body: formData, // 直接发送FormData }); const result = await response.json(); console.log("服务器响应:", result); if (result.error_code === 0) { alert("视频上传成功！"); } else { alert("视频上传失败：" + result.error_code); } } catch (error) { console.error("上传错误:", error); alert("上传过程中发生错误。"); }}
2.2.3 整合到下载按钮事件
为了保持与原代码的逻辑一致性，我们可以在用户点击“下载”按钮时，不仅触发本地下载，也同时触发上传到服务器的操作。
// 假设 downloadButton 和 recordedBlobs 已在全局或可访问范围内定义const downloadButton = document.querySelector('button#download');downloadButton.addEventListener('click', () => { const blob = new Blob(recordedBlobs, {type: 'video/mp4'}); // 调用上传函数 uploadVideo(blob); // 原始的本地下载逻辑（可选，可根据需求保留或移除） const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'w3-coder-recorder-test.mp4'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 100);});
注意事项：
Blob的type应与后端期望的文件类型一致，通常为video/mp4或video/webm。File构造函数的第三个参数可以指定MIME类型，确保服务器正确识别文件类型。fetch请求的URL /video-app/ 必须与Django的urls.py中定义的路径匹配。
3. Django后端处理视频上传
3.1 模型定义 (models.py)
首先，我们需要一个Django模型来存储视频文件及其相关信息。FileField将负责文件在文件系统中的存储和数据库中文件路径的记录。
from django.db import modelsfrom django.contrib.auth.models import User # 假设用户模型为Django自带的Userclass VideoInterview(models.Model): candidate = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True) description = models.CharField(max_length=100, blank=True, verbose_name="描述") document = models.FileField(upload_to='documents/videointerviews', verbose_name="视频文件") datetime = models.DateTimeField(auto_now_add=True) def __str__(self): return f"视频面试 - {self.candidate} - {self.datetime.strftime('%Y-%m-%d %H:%M')}"
说明：
upload_to=’documents/videointerviews’ 指定了文件在Django MEDIA_ROOT下的存储路径。document字段将存储实际的视频文件。
3.2 视图逻辑 (views.py)
Django视图负责接收前端上传的文件，将其保存到模型中，并返回一个JSON响应给前端。
from django.http import JsonResponsefrom django.shortcuts import renderfrom django.contrib.auth.decorators import login_requiredfrom .models import VideoInterview # 假设VideoInterview模型在当前应用的models.py中@login_requireddef video_interview_upload(request): # 将函数名改为更具描述性的名称 if request.method == 'POST': # 从request.FILES中获取名为'video'的文件 interview_file = request.FILES.get('video') if interview_file: try: # 创建VideoInterview实例并保存文件 VideoInterview.objects.create( candidate=request.user, # 假设用户已登录 document=interview_file, description="用户录制的面试视频" # 可以根据需求添加描述 ) return JsonResponse({'error_code': 0, 'message': '视频上传成功'}) except Exception as e: return JsonResponse({'error_code': 2, 'message': f'保存文件失败: {str(e)}'}) else: return JsonResponse({'error_code': 1, 'message': '未接收到视频文件'}) # 对于GET请求，渲染页面（如果需要） return render(request, 'myway/video_interview.html') # 替换为实际的模板路径
说明：
@login_required 装饰器确保只有登录用户才能访问此视图。request.FILES.get(‘video’) 用于获取前端FormData中name为”video”的文件。VideoInterview.objects.create(…) 将文件保存到数据库和文件系统。JsonResponse 用于向前端返回状态信息，error_code: 0 通常表示成功。
3.3 URL配置 (urls.py)
为了让前端能够访问到上传视图，需要在Django项目的urls.py中配置相应的URL。
# 例如，在你的应用级urls.py中from django.urls import pathfrom . import viewsurlpatterns = [ # ... 其他URL配置 ... path('video-app/', views.video_interview_upload, name='video_upload'),]
4. 注意事项与最佳实践
CSRF令牌： 务必在所有POST请求中包含CSRF令牌，以保障应用安全。文件大小限制： 在Django的settings.py中配置FILE_UPLOAD_MAX_MEMORY_SIZE和DATA_UPLOAD_MAX_MEMORY_SIZE来限制上传文件的大小，防止恶意上传或资源耗尽。错误处理： 前后端都应有健壮的错误处理机制。前端通过try…catch捕获网络错误和服务器返回的错误码；后端则应捕获文件保存、数据库操作等可能发生的异常。媒体访问权限： 浏览器访问用户摄像头和麦克风需要用户授权。navigator.mediaDevices.getUserMedia可能会因权限拒绝或设备问题而失败，前端应妥善处理这些错误（如DOMException: Starting videoinput failed）。MIME类型： 确保前端上传的Blob类型与后端期望的文件类型一致，这有助于后端正确处理文件。异步操作： 由于文件上传是异步操作，用户界面应提供相应的反馈（如加载指示器），以提升用户体验。文件命名： 在服务器端保存文件时，可以考虑生成唯一的文件名，避免命名冲突。Django的FileField在处理同名文件时会自动添加随机字符串。
5. 总结
通过结合JavaScript的MediaRecorder API和Fetch API，我们可以实现一个高效且用户友好的视频录制与上传功能。Django后端通过简单的视图逻辑即可接收并存储这些文件。这种前后端分离的异步上传方式，不仅提升了用户体验，也使得应用更加灵活和可扩展。在实际开发中，还需注意安全性、错误处理和性能优化等方面，以构建一个健壮的视频上传系统。
以上就是JavaScript前端录制视频并上传至Django后端存储的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1369335.html
微信扫一扫 
支付宝扫一扫 
