Angularjsとweb api - $ http post FormDataの数はウェブAPIで0です

Question

私はAngularjsとc＃Web APIを使って自分のモバイルアプリケーションを開発しています。私はこのプラットフォームを初めて使っています。私のアプリケーションでは、クライアント（Angularjs）からサーバー（c＃）にファイルとデータをアップロードする必要があります。データをポストする際、FormDataはクライアント側から正常にポストされましたが、サーバー側で空のデータとして受信されました。私は先月からそれを把握しようとしていますが、まだ解決策を得ることはできません。私を助けてください。これは私のコードです：

if (!Request.Content.IsMimeMultipartContent()) 
     { 
      throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 
     } 

     var root = HttpContext.Current.Server.MapPath("~/App_Data"); 
     var provider = new MultipartFormDataStreamProvider(root); 


     try 
     { 

      await Request.Content.ReadAsMultipartAsync(provider); 

      var Token = provider.FormData.GetValues("Token")[0]; 
      var Product = provider.FormData.GetValues("Product")[0]; 
      var Reference = provider.FormData.GetValues("Reference")[0]; 
      var ModuleId = Convert.ToInt32(provider.FormData.GetValues("ModuleId")[0]); 
      var Repeat = ""; 
      if (provider.FormData.GetValues("Repeat") == null) 
      { 
       Repeat = "N"; 
       // var Repeat = provider.FormData.GetValues("Repeat")[0]; 
      } 
      else 
      { 
       Repeat = "Y"; 
      } 

      var Description = provider.FormData.GetValues("Description")[0]; 

      var Attachment1 = provider.FileData[0]; 

      if (!CRQExtentions.IsValidToken(Token)) 
       // return new HttpResponseMessage(HttpStatusCode.Unauthorized); 
       return Request.CreateResponse(HttpStatusCode.Unauthorized, "Invalid Token"); 


      var tr = new TicketRepository(); 

      var res = tr.AddTicket(Token, Product, Reference, ModuleId, Repeat, Description, Attachment1, Attachment2); 


      string s = "Success"; 
      System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer(); 
      return Request.CreateResponse(HttpStatusCode.OK, new { data = "Test msg" }); 

     } 
     catch (Exception e) 
     { 
      string f = "Failed"; 
      System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer(); 
      return Request.CreateResponse(HttpStatusCode.BadRequest, new { data = "Test msg" }); 
     } 

HTML：

<form enctype="multipart/form-data" ng-submit="uploadDataWithFile()"> 
    <input type="file" file-model="myFile" name="Attachment1" multiple /> 
    <input type="button" ng-click="uploadDataWithFile()" value="Send" name="button" /></form> 

がANGULARJS：

myApp.config(['$httpProvider', function ($httpProvider) { 
$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript'; 
$httpProvider.defaults.headers.post['Content-Type'] = 'multipart/form-data; charset=utf-8';}]); 

myApp.service('fileUpload', function ($http) { 
this.uploadFileToUrl = function (file, uploadUrl) { 
    var fd = new FormData(); 
    fd.append('Attachment1', file); 
    //console.log(fd); 
    $http.post(uploadUrl, fd, { 
     //withCredentials: false, 
     headers: { 
      'Content-Type': undefined 
     }, 

     transformRequest: angular.identity, 
     responseType: "arraybuffer" 
    }).success(function (response, status, headers, config) { 
     console.log(response); 

     if (status == 200 || status == 202) { 
      //do whatever in success 
     } 
     else { 
      // handle error in else if needed 
     } 
    }).error(function (error, status, headers, config) { 
     console.log(error); 
     ons.notification.alert("Error in Saving New CRQ"); 
     // handle else calls 
    }); 
    } 
    }); 

    myApp.controller('NewCRQController', ['$scope', '$http', 'fileUpload', function ($scope, $http, fileUpload) { 
    $scope.uploadDataWithFile = function() { 
    var file = $scope.myFile; 
    console.dir(file); 
    var checkedItem; 
    if ($scope.switchon == true) { 
     checkedItem = "Y"; 
    } 
    else { 
     checkedItem = "N"; 
    } 
    var uploadUrl = "http://localhost:11663/api/Tickets/CreateNewCrqWithFiles"; 
    fileUpload.uploadFileToUrl(file, uploadUrl); 
} 
    }]); 

Some screenshots of errors

Answer 1

コメントで述べたように、ため正常に動作しているコードの下に見つけてください私：

self.addFlight = function (requestData) { 

      var deferred = $q.defer(); 

      $http.post(baseUrl, requestData, { 
       headers: { 
        'Content-Type': undefined, 
        'Accept': 'application/json' 
       } 
      }) 
       .success(function (data) { 
        deferred.resolve(data); 
       }).error(function (msg, code) { 
        deferred.reject(msg); 
       }); 

      return deferred.promise; 
     }; 

そしてrequestDataは次のとおりです。

logoThumbnailData.dataは実際のファイルである

var formData = new FormData(); 
formData.append("flight[name]", self.flightDetails.name); 

formData.append("image", self.logoThumbnailData.data); 

：

var fileData = element.files[0], 
windowUrl = window.URL || window.webkitURL; 

var objectUrl = windowUrl.createObjectURL(fileData); 
self.logoThumbnailData = { data: fileData, url: objectUrl }; 

あなたのAPIアクションは次のようになります。

public IHttpActionResult YourMethodName(HttpPostedFileBase image) 

"画像"モーダルバインディングが適切な場合はファイルにバインドする必要があります。それ以外の場合は、Request.Filesをチェックしてください。