如何将前端录制的音频通过POST方法发送至Django视图？

一、前端代码修改 #

你需要完善sendData函数，通过FormData封装音频文件并发送POST请求，同时修正原代码中的一处小错误：

<button type="button" id="record">Record</button>
<button type="button" id="stopRecord" disabled>Stop</button>
<audio id="recordedAudio"></audio>
<!-- 若使用Django模板，需添加CSRF令牌 -->
{% csrf_token %}

<script> 
    // 获取CSRF令牌（用于Django的CSRF验证）
    function getCsrfToken() {
        return document.querySelector('[name=csrfmiddlewaretoken]').value;
    }

    navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => handlerFunction(stream))

    let rec;
    let audioChunks = [];

    function handlerFunction(stream) {
      rec = new MediaRecorder(stream);
      rec.ondataavailable = e => {
        audioChunks.push(e.data);
        if (rec.state === "inactive"){
          // 注意：部分浏览器可能不支持mp3编码，若出现问题可改为audio/webm
          let blob = new Blob(audioChunks, {type:'audio/mp3'});

          recordedAudio.src = URL.createObjectURL(blob);
          recordedAudio.controls = true;
          recordedAudio.autoplay = true;
          sendData(blob);
        }
      }
    }
  
    // 完善发送数据的函数
    function sendData(data) {
        const formData = new FormData();
        // 将Blob添加到FormData，命名为"audio_file"（后端将通过这个key获取文件）
        formData.append('audio_file', data, 'recorded_audio.mp3');
        
        fetch('/save-audio/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCsrfToken()
            },
            body: formData
        })
        .then(response => response.json())
        .then(result => {
            console.log('上传成功:', result);
        })
        .catch(error => {
            console.error('上传失败:', error);
        });
    }

    document.getElementById('record').onclick = e => {
        record.disabled = true;
        record.style.backgroundColor = "blue";
        stopRecord.disabled = false;
        audioChunks = [];
        rec.start();
    }

    document.getElementById('stopRecord').onclick = e => {
        record.disabled = false;
        // 修正原代码的错误：stop改为stopRecord
        stopRecord.disabled = true;
        record.style.backgroundColor = "red";
        rec.stop();
    }
</script>

二、Django后端实现 #

1. 配置URL路由（urls.py） #

在项目或应用的urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('save-audio/', views.save_audio, name='save_audio'),
]

2. 编写视图函数（views.py） #

在views.py中实现接收音频文件的逻辑：

from django.http import JsonResponse

def save_audio(request):
    if request.method == 'POST':
        # 从request.FILES中获取音频文件，key需和前端FormData的命名一致
        audio_file = request.FILES.get('audio_file')
        if audio_file:
            # 示例：将文件保存到服务器指定目录
            with open(f'./recorded_audio/{audio_file.name}', 'wb+') as destination:
                for chunk in audio_file.chunks():
                    destination.write(chunk)
            return JsonResponse({'status': 'success', 'message': '音频文件已保存'})
        else:
            return JsonResponse({'status': 'error', 'message': '未接收到音频文件'})
    else:
        return JsonResponse({'status': 'error', 'message': '仅支持POST请求'})

3. 注意事项 #

• 确保服务器上的保存目录（如recorded_audio/）已存在，且Django进程有写入权限
• 若前端未使用Django模板，可通过Cookie获取CSRF令牌，修改getCsrfToken函数：

  function getCsrfToken() {
      return document.cookie.split('; ').find(row => row.startsWith('csrftoken=')).split('=')[1];
  }
  

• 部分浏览器的MediaRecorder可能不支持mp3编码，若录制失败，可将Blob的type改为audio/webm，后端保存时对应修改文件名后缀。

内容的提问来源于stack exchange，提问作者Md. Redwan Ali Rafi 1921161642