使用反應在 django rest 框架中獲取“狀態 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 Model：

from django.db import models

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

我終於發現了問題所在。 問題出在錄制的音頻 blob 上。 當我嘗試使用新的 html 文件和 postman 上傳音頻和圖像文件時。 服務器在這兩種情況下都運行良好。 我只需要找到另一種方式來錄制和發送帶有反應的音頻。 有人對此有任何想法嗎？

Answer 1

ModelViewset 沒有“發布”操作嘗試遵循 Viewsets https://www.django-rest-framework.org/api-guide/viewsets/上的文檔

“ModelViewSet 類提供的操作是 .list()、.retrieve()、.create()、.update()、.partial_update() 和 .destroy()。”

Answer 2

我終於發現了問題所在。 問題出在錄制的音頻 blob 上。 而不是發送recordedBlob您應該發送recordedBlob.blob 。因為react-mic返回一個包含音頻blob以及與之相關的其他數據的blob。 所以recordedBlob.blob是要發送的實際數據。