'ngFileUpload' 和 Django Rest 框架

Question

您好，我有一个 Web 应用程序，使用 AngularJS 作为前端，使用 Django Rest Framework 作为后端。一切顺利，除了当我在 ngFileUpload 的上传函数的数据参数内传递一个 json 值并在 django rest 框架内打印 request.data 时，结果为

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

什么时候会导致

{ '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 app = 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,)

'ngFileUpload' 和 Django Rest 框架

'ngFileUpload' and Django Rest Framework

django

angularjs

django-rest-framework

ng-file-upload