Datei über eckige HTTP-Anfrage senden

Question

Ich benutze angularjs und versuche, ein Bild auf einen Django-Backend-Server zusammen mit anderen Daten im Anfragetext hochzuladen.

Ich bekomme immer einen Fehler vom Server, der mir sagt, dass das Bild, das ich sendete, keine Datei war. (Angenommen, das Backend hat keine Probleme)

Ich habe versucht mit ng-Datei-Upload(), um die Datei zu erhalten und dann durch Winkel selbst zu senden. (Anmerkung: Ich brauche andere Daten senden zusammen mit dem Bild), so möchte ich die Datei in einer Variablen speichern und es in der Anfrage Körper passieren wie so:

<form name="form"> 
<div class="button" ngf-select ng-model="file" name="file" ngf-resize="{width: 100, height: 100}">Select</div> 
<button type="submit" ng-click="submit()">submit</button> 
</form> 

da die Datei in $ Umfang gespeichert ist. Datei, ich versuche, es in der hTTP-Anforderung zu verwenden:

$http({ 
      'method': "PUT", 
      'url': "api/candidate-profiles/" + id, 
      'data':data 
}) 

wo Daten:

{"id": $scope.id, 
"name": $scope.name, 
"avatar":$scope.file} 

ich erhalte einen Validierungsfehler aus dem Backend Einzelheiten enthält, dass der avatar nicht um eine Datei handelt. Irgendeine Hilfe?

Answer 1

HTML

<div ng-controller="formCtrl"> 
      <form name="userForm" class="well form-search" > 

       <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required > 
       <input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required > 
       <input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required > 
       <button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)" ng-disabled="userForm.$invalid">Submit </button> 

      </form> 
      <pre ng-model="result"> 
       {{result}} 
      </pre> 
     </div> 

jsfile

var app = angular.module('formExample', []); 

app.controller("formCtrl", ['$scope', '$http', function($scope, $http) { 
     $scope.url = 'submit.php'; 

     $scope.formsubmit = function(isValid) { 


      if (isValid) { 


       $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}). 
         success(function(data, status) { 
          console.log(data); 
          $scope.status = status; 
          $scope.data = data; 
          $scope.result = data; // Show result from server in our <pre></pre> element 
         }) 
      }else{ 

        alert('Form is not valid'); 
      } 


     } }]); 

Code Download

demo click

Answer 2

Ich denke, man sollte rea d die Dokumentation und einige Proben wie this

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
    $scope.uploadPic = function(file) { 
    file.upload = Upload.upload({ 
     url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
     data: {username: $scope.username, 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)); 
    }); 
    } 
}]); 

siehe

http://jsfiddle.net/danialfarid/maqbzv15/1118/