前端录制视频直传Django：Fetch API与CSRF安全实践

<div id="container mx-auto">
    <video id="gum" class="mx-auto w-50 d-flex justify-content-center" autoplay muted></video>
    <video id="recorded" class="mx-auto w-50 d-flex justify-content-center" playsinline loop></video>

    <div class="my-5">
        <button class="btn btn-primary" id="start">Start camera</button>
        <button class="btn btn-success" id="record" disabled>Record</button>
        <button class="btn btn-warning" id="play" disabled>Play</button>
        <button class="btn btn-secondary" id="download" disabled>Download</button>
    </div>
    <!-- 其他UI元素和表单，但上传视频不再依赖传统表单提交 -->
    <form method="post" enctype="multipart/form-data" style="display: none;">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

async function upload(formData) {
  try {
    // 假设后端上传视频的URL是 "/video-app"
    const response = await fetch("/video-app", {
      method: "POST",
      headers: {
        // 将CSRF令牌添加到请求头中
        "X-CSRFToken": getCookie('csrftoken'),
      },
      // FormData对象将自动设置正确的Content-Type
      body: formData,
    });
    const result = await response.json();
    console.log("上传响应:", result);
    if (result.error_code === 0) {
      alert("视频上传成功！");
    } else {
      alert("视频上传失败：" + result.message);
    }
  } catch (error) {
    console.error("上传错误:", error);
    alert("视频上传过程中发生错误。");
  }
}

let mediaRecorder;
let recordedBlobs = []; // 确保这里被初始化

const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');

// ... (其他录制、播放相关的JavaScript代码，如startRecording, stopRecording, handleDataAvailable, init等) ...

downloadButton.addEventListener('click', () => {
  // 将所有录制的数据块合并成一个Blob对象，指定MIME类型为'video/mp4'
  const blob = new Blob(recordedBlobs, {type: 'video/mp4'});

  // **上传到服务器的逻辑**
  const formData = new FormData();
  // 将Blob包装成一个File对象，FormData才能正确处理
  // 'video'是后端期望接收的文件字段名
  // 'my-interview.mp4'是上传到服务器的文件名
  formData.append("video", new File([blob], 'my-interview.mp4', { type: 'video/mp4' }));
  upload(formData); // 调用上传函数

  // **原有的客户端下载逻辑**
  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);
});

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from .models import VideoInterview, Position # 确保导入VideoInterview模型

@login_required
def video_interview(request): # 简化URL参数，使其更像一个API端点
    if request.method == 'POST':
        # 从request.FILES中获取名为'video'的文件
        interview_file = request.FILES.get('video')
        if interview_file:
            # 创建VideoInterview模型实例并保存
            VideoInterview.objects.create(
                candidate=request.user,
                document=interview_file,
                # description字段可以根据需要从请求中获取或设置默认值
                description=f"Recorded video by {request.user.username}" 
            )
            return JsonResponse({'error_code': 0, 'message': '视频上传成功！'})
        else:
            return JsonResponse({'error_code': 1, 'message': '未接收到视频文件。'})

    # 对于GET请求，渲染页面
    # 根据实际情况，可能需要传递position等上下文
    # 例如：
    # position_id = request.GET.get('position_id')
    # position_slug = request.GET.get('position_slug')
    # position = Position.objects.filter(id=position_id, position_slug=position_slug).first()
    # context = {'position': position}
    return render(request, 'myway/video_interview.html') # 假设你的模板路径是这个

from django.db import models
from django.contrib.auth import get_user_model

User = get_user_model() # 推荐使用get_user_model()获取用户模型

class VideoInterview(models.Model):
    def __str__(self):
        return f"Video by {self.candidate.username} on {self.datetime.strftime('%Y-%m-%d %H:%M')}"

    candidate = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True)
    description = models.CharField(max_length=100, blank=True, verbose_name="描述")
    # upload_to='documents/videointerviews' 指定了文件存储的子目录
    document = models.FileField(upload_to='documents/videointerviews', verbose_name="视频文件")
    datetime = models.DateTimeField(auto_now_add=True)

# settings.py
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'