通过反应在 django 休息框架中获取“状态 400 错误请求”

Question

我正在尝试使用 rest 框架录制音频并将其上传到 django 服务器。我的音频正在录制，服务器工作正常。但他们没有一起工作。我收到状态 400 错误请求。我尝试在反应中同时使用 axios 和 fetch() ，但没有任何帮助。 这是我使用 axios 的时候：

这是我使用 fetch() 的时候

这是反应代码：

  onStop(recordedBlob) {
    var headers ={
      'Content-Type' : 'multipart/form-data'
    }
    const data = new FormData(); 
        data.append('audio', recordedBlob);
        console.warn(recordedBlob);
  /*      fetch("http://127.0.0.1:8000/temp/",{
          method:'POST',
          body:data,
          headers:headers
        }).then( res => console.log(res)).catch(error => {
          console.log(error);
        })*/

        axios.post("http://127.0.0.1:8000/temp/", data, { 'headers':headers
        })
        .then(res => {
            console.warn(res);
        }).catch((error)=>{
          console.log(error);
        });
        
  }

我的 django 视图文件：

class AudioCreateView(ModelViewSet):
    queryset=Audio.objects.all()
    serializer_class = AudioSerializer
    def create(self, request, *args, **kwargs):
        if 'file' not in request.data:
            raise ParseError('No File Uploaded')
        file_obj = request.data['audio']
        # do some stuff with uploaded file
        Audio.objects.create(audio=file_obj)
        return Response(data="File Received")

我的序列化程序文件：

class AudioSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model= Audio
        fields = ['audio']

我的 Django 设置：

INSTALLED_APPS = [
    'corsheaders',
    'lang_translator.apps.LangTranslatorConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL= "/media/"
REST_FRAMEWORK={
    'DEFAULT_PERMISSION_CLASSES': [
   'rest_framework.permissions.AllowAny',
]
}
CORS_ORIGIN_ALLOW_ALL=True

我的 Django 模型：

from django.db import models

class Audio(models.Model):
    audio = models.FileField(upload_to='images/')
    

我终于找到了问题所在。问题出在录制的音频 blob 上。当我尝试使用新的 html 文件和邮递员上传音频和图像文件时。服务器在这两种情况下都运行良好。我只需要找到另一种方式来录制和发送带有反应的音频。有人对此有任何想法吗？

Answer 1

我终于找到了问题所在。问题出在录制的音频 blob 上。而不是发送recordedBlob 您应该发送recordedBlob.blob。因为react-mic 返回一个包含音频blob 以及与之相关的其他数据的blob。所以recordedBlob.blob是要发送的实际数据。

Answer 2

ModelViewset 没有“发布”操作尝试遵循 Viewsets 上的文档 https://www.django-rest-framework.org/api-guide/viewsets/

'ModelViewSet 类提供的操作是 .list()、.retrieve()、.create()、.update()、.partial_update() 和 .destroy()。'