2016-12-04 12 views
1

私は角度の付いたファイルをアップロードしようとしていますが、投稿結果が405になっています。インターネットで調査したところ、このメソッドが許可されていないときの応答です。なぜこのエラーが出るのか分かりません。 ご協力いただきありがとうございます。Angular upload - エラー405 FormDataを送信するとき

HTML

<input type="file" file-model="myFile" /> 
<button ng-click="uploadFile()">upload me</button> 

指令

MyApp.directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]); 

サービス

MyApp.service('fileUpload', ['$http', function ($http) { 
this.uploadFileToUrl = function (file, uploadUrl) { 
    var fd = new FormData(); 
    fd.append('file', file); 
    $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }) 
    .success(function() { 
     console.log(1); 
    }) 
    .error(function() { 
     console.log(2); 
    }); 
} 
}]); 

コントローラ

MyApp.controller('AdminController', ['$scope', '$http', '$location', 'fileUpload', function ($scope, $http, $location, fileUpload) { 
var baseUrl = $location.protocol() + "://" + location.host + "/"; 
$scope.uploadFile = function() { 
    var file = $scope.myFile; 
    $http.post(baseUrl + "Admin/uploadFile", { data: file }); 
}; 

}]); 

代わりにFormDataを送信するバックエンド

[HttpPost] 
    public ActionResult uploadFile(dynamic data) 
    { 
     try 
     { 
      MultiModel mcqModel = new MultiModel(); 
      mcqModel.editAddQuestionAnswers(data); 
      Response.StatusCode = 200; 
      return Content("updated"); 
     } 
     catch (Exception ex) 
     { 
      Response.StatusCode = 500; 
      return Content("Fail"); 
     } 
    } 
+1

バックエンドコードを投稿する...これはフロントエンドの問題ではありません – Sherif

+0

APIではどのメソッドが必要ですか?あなたは405エラーを理解していますか? –

+0

ありがとうございます。バックエンドコードも追加しました。バックエンドに送る前にファイルを文字列化するか、何か他のことをする必要がありますか?私はビデオをアップロードし、そのサイズは約100MBになるでしょう。適切なアプローチを使用していますか? –

答えて

0

、直接ファイルを送信:

MyApp.service('fileUpload', ['$http', function ($http) { 
this.uploadFileToUrl = function (file, uploadUrl) { 
    //var fd = new FormData(); 
    //fd.append('file', file); 
    //$http.post(uploadUrl, fd, { 
    $http.post(uploadUrl, file, { 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }) 
} 
}]); 

をブラウザがFormDataを送信すると、それは'Content-Type': multipart/formdataを使用して、BASE64を使用して各部分を符号化します。

ブラウザがファイルまたはブロブを送信すると、コンテンツタイプをファイルまたはブロブのMIMEタイプに設定し、バイナリデータを送信します。

関連する問題