角度上传 - 错误405当发送FormData [英] Angular upload - error 405 When Sending FormData

问题描述

我试图上传一个角度的文件，我得到的结果是405。经过在互联网上的研究，我发现这是一个响应，当方法是不允许的。我不明白为什么我得到这个错误。
感谢您的帮助。
$ b

HTML

 < input type =filefile-model =myFile/> 
<按钮ng-click =uploadFile（）>上传我< /按钮> 
  

指令

  MyApp.directive（'fileModel'，['$ parse'，function（$ parse）{
 return {
 restrict：'A'，
 link：function（scope，元素，attrs）{
 var model = $ parse（attrs.fileModel）; 
 var modelSetter = model.assign; 
 $ b 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-类型'：undefined} 
））
 .success（function（）{
 console.log（1）; 
}）
 .error 
 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}）; 
}; 
 
}]）; 
  

后端

  mcqModel.editAddQuestionAnswers（data）; 
 Response.StatusCode = 200; 
返回内容（更新）; 
 
 catch（Exception ex）
 {
 Response.StatusCode = 500; 
返回内容（失败）; 
 
 
 $ / code $ / pre 
 
解决方案
发送 FormData ，直接发送文件： 
 
 
  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。身份，
标题：{'Content-Type'：undefined} 
}）
} 
}]）; 
   FormData 时，它使用'Content-Type'：multipart /当使用浏览器发送文件或blob时，它将内容类型设置为MIME类型该文件或blob并发送二进制数据。
I am trying to upload a file with angular and I am getting post result 405. After researching in internet I found out that this is a response when the method is not allowed. I can not figure out why I am getting this error.
Thanks in advance for the help.

HTML
<input type="file" file-model="myFile" />
<button ng-click="uploadFile()">upload me</button>
Directive
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]);
            });
        });
    }
};
}]);
Service
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);
    });
}
}]);
Controller
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 });
};

}]);
Backend
[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");
        }
    }

解决方案
Instead of sending FormData, send the file directly:
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 }
    })
}
}]);
When the browser sends FormData, it uses 'Content-Type': multipart/formdata and encodes each part using base64.

When the browser sends a file or blob, it sets the content type to the MIME-type of the file or the blob and sends binary data.

                        
这篇关于角度上传 - 错误405当发送FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！