'ngFileUpload'和Django Rest Framework

Question

嗨我有一个Web应用程序使用AngularJS作为前端，Django Rest Framework作为后端。一切工程进展顺利，只是当我通过ngFileUpload的上传功能的数据参数内的JSON值，并将其余的Django框架，其结果

{ 'principal_master[id]': ['1'], 'file': [<InMemoryUploadedFile: adgc.jpg (image/jpeg)>], 'username': ['dsadasd'] } 

内request.data当应该产生于

{ 'principal_master' : '{ "id": "1"}', 'file': [<InMemoryUploadedFile: adgc.jpg (image/jpeg)>], 'username': ['dsadasd'] } 

这是我在前端的HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<script type="text/javascript" src="https://angular-file-upload.appspot.com/js/ng-file-upload.min.js"></script> 
<div ng-controller="MyCtrl"> 
    <form name="myForm" > 
     <fieldset> 
      <legend>Upload on form submit</legend> 
      Username: 
      <input type="text" name="userName" ng-model="username" size="31" required> 
      <i ng-show="myForm.userName.$error.required">*required</i> 
      <br>Photo: 
      <input type="file" ngf-select ng-model="picFile" name="file"  
       accept="image/*" ngf-max-size="2MB" required 
       ngf-model-invalid="errorFile"> 
      <i ng-show="myForm.file.$error.required">*required</i><br> 
      <i ng-show="myForm.file.$error.maxSize">File too large 
       {{errorFile.size/1000000|number:1}}MB: max 2M</i> 
      <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button> 
      <br> 
      <button ng-disabled="!myForm.$valid" 
        ng-click="uploadPic(picFile)">Submit</button> 
      <span class="progress" ng-show="picFile.progress >= 0"> 
      <div style="width:{{picFile.progress}}%" 
       ng-bind="picFile.progress + '%'"></div> 
      </span> 
      <span ng-show="picFile.result">Upload Successful</span> 
      <span class="err" ng-show="errorMsg">{{errorMsg}}</span> 
     </fieldset> 
     <br> 
    </form> 
</div> 

这是我在前端JS代码： VAR应用= angular.module（'myApp'，['ngFileUpload']）; 的app.config（函数（$ interpolateProvider，$ httpProvider）{// 更改模板标记 $ interpolateProvider.startSymbol（ '[['）; $ interpolateProvider.endSymbol（ ']]'）; }）;

app.controller('MyCtrl', function($scope, Upload, $timeout){ 
    $scope.uploadPic = function(file) { 
    file.upload = Upload.upload({ 
     url: 'http://192.168.0.50:8000/api/people/v1/principals/add/', 
     data: {username: $scope.username, principal_master : '{ "id": "1"}' file: file}, 
    }); 

    file.upload.then(function (response) { 
     $timeout(function() { 
     file.result = response.data; 
     }); 
    }, function (response) { 
     if (response.status > 0) 
     $scope.errorMsg = response.status + ': ' + response.data; 
    }, function (evt) { 
     // Math.min is to fix IE which reports 200% sometimes 
     file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
    }); 
    } 
}); 

这是我在后端的基本代码：

#python 
import json 

#Django Core 
from django.http import HttpResponse 
from django.views.decorators.csrf import csrf_exempt 
from django.db.models import Q 

#Rest Framework 
from rest_framework.parsers import FileUploadParser, FormParser, MultiPartParser 
from rest_framework.response import Response 
from rest_framework import status 
from rest_framework.decorators import api_view, parser_classes 

#test_people app 
from .serializers import * 
from test_people.decorators import token_required 

@api_view(['POST']) 
# @parser_classes((FileUploadParser,)) 
@parser_classes((FormParser, MultiPartParser)) 
@csrf_exempt 
@token_required 
def add(request): 
    #print(request.data) 
    if request.method == 'POST': 
     print("-------------") 
     print(request.data) 
     print(request.data['principal_master']) 
     print(type(request.data['principal_master'])) 
     return 

Answer 1

我可以使用arrayKey解决这个问题： '' 的更新选项，MultiPartParser。

我的控制器：

Upload.upload({ 
    url: '/my/api/file/', 
    data: { 
     file: file 
    }, 
    arrayKey: '', 
}, ...) 

我的观点：

class FileViewSet(viewsets.ModelViewSet): 
    queryset = File.objects.all() 
    serializer_class = FileSerializer 
    parser_classes = (parsers.FormParser, parsers.MultiPartParser,)