JavaScript与Django集成：实现前端录制视频文件到后端存储的教程

 // ... (保留原有的JavaScript录制逻辑，例如mediaRecorder、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');  // 获取CSRF Token的辅助函数 function getCookie(name) {   const value = `; ${document.cookie}`;   const parts = value.split(`; ${name}=`);   if (parts.length === 2) return parts.pop().split(';').shift(); }  // 上传函数：负责将FormData发送到Django后端 async function upload(formData) {   try {     // 这里的URL '/video-app' 需与Django的urls.py配置保持一致     const response = await fetch("/video-app", {       method: "POST",       headers: {         "X-CSRFToken": getCookie('csrftoken'), // 附带CSRF Token，确保Django安全认证       },       body: formData, // 发送FormData对象，Fetch API会自动设置Content-Type为multipart/form-data     });     const result = await response.JSon(); // 解析后端返回的json响应     console.log("上传响应:", result);     // 根据后端返回的result处理，例如显示成功或失败消息     if (result.error_code === 0) {         alert('视频上传成功！');     } else {         alert('视频上传失败: ' + result.message);     }   } catch (error) {     console.error("上传错误:", error);     alert('视频上传过程中发生错误！');   } }  // 修改下载按钮的点击事件，增加上传逻辑 downloadButton.addEventListener('click', () => {   // 将录制的Blob数据合并为一个完整的MP4视频Blob   const blob = new Blob(recordedBlobs, {type: 'video/mp4'});    // 1. 上传到服务器   const formData = new FormData();   // 将Blob转换为File对象，命名为'my-interview.mp4'，并作为'video'字段添加到FormData   formData.append("video", new File([blob], 'my-interview.mp4'));   upload(formData); // 调用上传函数    // 2. 客户端下载（如果不需要客户端下载，可以移除以下代码）   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); });  // ... (保留原有的start/stop Recording, play, handleSuccess, init等函数) // 确保MediaRecorder的ondataavailable和onstop事件处理逻辑正确 function handleDataAvailable(event) {   console.log('handleDataAvailable', event);   if (event.data && event.data.size > 0) {     recordedBlobs.push(event.data);   } }  function startRecording() {   recordedBlobs = [];   let options = {mimeType: 'video/webm;codecs=vp9,opus'};   try {     mediaRecorder = new MediaRecorder(window.stream, options);   } catch (e) {     console.error('Exception while creating MediaRecorder:', e);     errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;     return;   }   recordButton.textContent = 'Stop Recording';   playButton.disabled = true;   downloadButton.disabled = true;   mediaRecorder.onstop = (event) => {     console.log('Recorder stopped: ', event);     console.log('Recorded Blobs: ', recordedBlobs);   };   mediaRecorder.ondataavailable = handleDataAvailable;   mediaRecorder.start(); }  function stopRecording() {   mediaRecorder.stop();   recordButton.textContent = 'Record'; // 停止后将按钮文本改回“Record”   playButton.disabled = false;   downloadButton.disabled = false; }