Django录音应用上传音频时出现Bad Request错误求助

1. 修正前端请求发送方式 #

前端能生成音频但后端收不到，核心问题大概率是音频Blob的发送格式不对，必须用FormData包装后发送，同时要带上Django要求的CSRF令牌：

// 停止录音后获取音频Blob
const audioBlob = 你的录音生成Blob对象;
const formData = new FormData();
// 把Blob加入表单，第三个参数是保存的文件名
formData.append('audio-blob', audioBlob, 'user_recording.wav');

// 发送POST请求
fetch('/save-audio/', {
  method: 'POST',
  body: formData,
  headers: {
    // 必须带上CSRF令牌，避免跨站请求被拦截
    'X-CSRFToken': getCookie('csrftoken')
  }
});

// 辅助函数：从Cookie中获取CSRF令牌
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

如果用HTML表单提交，要确保表单的enctype属性设为multipart/form-data（文件上传必须的格式），且文件输入框的name值为audio-blob：

<form method="POST" action="/save-audio/" enctype="multipart/form-data">
  {% csrf_token %}
  <input type="file" name="audio-blob" id="audio-input" style="display:none;">
  <button type="submit">保存录音</button>
</form>

2. 调整后端视图的接收逻辑 #

Django中上传的文件数据存在request.FILES里，不是request.POST，修正视图函数：

# views.py
from django.http import HttpResponseBadRequest, HttpResponse
import os
from django.conf import settings

def save_audio(request):
    if request.method != 'POST':
        return HttpResponseBadRequest('仅支持POST请求')
    
    # 检查音频文件是否存在
    if 'audio-blob' not in request.FILES:
        return HttpResponseBadRequest('缺少audio-blob参数')
    
    audio_file = request.FILES['audio-blob']
    # 构建保存路径（基于settings中的MEDIA_ROOT）
    save_dir = os.path.join(settings.MEDIA_ROOT, 'audio_diaries')
    os.makedirs(save_dir, exist_ok=True)
    save_path = os.path.join(save_dir, audio_file.name)
    
    # 写入文件
    with open(save_path, 'wb+') as destination:
        for chunk in audio_file.chunks():
            destination.write(chunk)
    
    # 后续可以在这里把文件路径或二进制数据存入数据库
    return HttpResponse('音频保存成功')

同时要确保settings.py配置了媒体文件路径：

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

3. 验证URL配置 #

确认urls.py中的路由正确映射到处理视图：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('record/', views.record_page, name='record'),
    path('save-audio/', views.save_audio, name='save_audio'),
]

4. 调试验证 #

• 前端发送请求前，打印FormData内容确认音频已添加：

console.log([...formData.entries()]); // 查看FormData中的键值对

• 后端视图中增加打印，确认数据是否到达：

print('接收的FILES:', request.FILES)
print('接收的POST:', request.POST)

内容的提问来源于stack exchange，提问作者lilsnow02