角度HTTPリクエストによるファイルの投稿

Question

私はangularjsを使用していますが、私はリクエストボディの他のデータと共にdjangoバックエンドサーバに画像をアップロードしようとしています。

送信した画像がファイルではないことを私に伝えるエラーがサーバーから引き続き発生します。 （バックエンドに問題がないと仮定します）

ng-file-upload（https://github.com/danialfarid/ng-file-upload）を使用してファイルを取得してから、角度を使って送信しようとしました。 （注：私は絵と一緒に他のデータを送信する必要がある）ので、私は変数にファイルを保存し、そのようにリクエストボディにそれを渡したい：ファイルは$スコープに格納されているので

<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> 

。ファイル、私は、httpリクエストでそれを使用しよう：

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

データがある場合：

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

私はアバターがファイルではありませんバックエンドspecifiyingから検証エラーを取得します。どんな助け？

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

私はあなたがレアだと思いますDドキュメント、および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)); 
    }); 
    } 
}]); 

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

のようないくつかのサンプルを参照してください