Angularjs formData.appendが動作しません

Question

こんにちは私はangularjsアプリケーションを開発しています。私はファイルアップロードモジュールを持っています。私は以下のようにFormDataにファイルデータを追加しています。

var filesformdata = new FormData(); 
    angular.forEach(this.pendingFiles, function (value, key) { 
       filesformdata.append(key, value); 
      }); 
      for (var pair of filesformdata.entries()) { 
       console.log(pair[0] + ', ' + pair[1]); 
      } 

これは私の角度コードです。

angular.module('RoslpApp').factory('fileUpload', ['$http', function ($http) { 
    debugger; 
    var fileuploadurl = "http://localhost:19144/" + 'api/Customer/UploadLeaseFiles/' + 2; 
    var service = { 
     uploadUrl: fileuploadurl, 
     pendingFiles: [], 
     doUpload: doUpload 
    }; 
    return service; 


    function doUpload() { 
     debugger; 
     var filesformdata = new FormData(); 
     angular.forEach(this.pendingFiles, function (value, key) { 
      filesformdata.append(key, value); 
     }); 
     for (var pair of filesformdata.entries()) { 
      console.log(pair[0] + ', ' + pair[1]); 
     } 

     return $http.post(this.uploadUrl, filesformdata, { 
      transformRequest: angular.identity, 
      headers: { 
       'Content-Type': undefined 
      } 
     }) 
    } 
}]); 

これは指示コードです。

myapp.directive('fileModel', ['fileUpload', function (fileUpload) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.bind("change", function (evt) { 
       fileUpload.pendingFiles[attrs.fileModel] = evt.target.files[0]; 
      }); 
     } 
    }; 
}]); 

これはこれは、HTMLコードで

$scope.upload = function (filename) { 
       debugger; 
       fileUpload.doUpload().success(function (success) { 
        console.log(success); 
       }); 
      }; 

アップロード機能です。

<div class="upload-button" ng-repeat="file in files"> 
       <div class="upload-button-icon"> 
        <img src="images/folder-small.png"> 
        <div class="upload-text">{{file}}</div> 
        <input type="file" id="file1" name="file1" file-data="{{file}}" file-model="{{file}}"/> 
       </div> 
      </div> 
    <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="upload()"> 

私はthis.pendingFilesでファイルを持っていますが、console.logまたはapiで以下のコードを使用して表示するとファイルがありません。

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; 
       // CHECK THE FILE COUNT. 
       UploadedLeaseFiles totalDocumentInserted = null; 
       for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++) 

私はthis.pendingFilesの中にファイルを持っています。スクリーンショットをご覧ください。

My filesformdata FormDataは常に空です。私はこれを解決するためにここにいくつかの助けを得ることができる？ありがとう。

Answer 1

FormDataオブジェクトfilesformdataのデータは、console.log（）で検査することで明らかになりません。そこには、あなたはそれを見ることができません。ただし、要求ペイロードの下にある[ネットワーク]タブで表示できます。

app.directive("filesInput", function() { 
    return { 
    require: "ngModel", 
    link: postLink 
    }; 
    function postLink(scope, elem, attrs, ngModel) { 
    elem.on("change", function() { 
     ngModel.$setViewValue(elem[0].files); 
    }) 
    } 
}); 

使用法：あなたはそのformData.append作品を見つけるでしょう

vm.compute = function() { 
     var filesformdata = new FormData(); 
     angular.forEach(vm.files, function (value, key) { 
      filesformdata.append(key, value); 
     }); 
     for (var pair of filesformdata.entries()) { 
      console.log(pair[0] + ', ' + pair[1]); 
      console.log(pair[1]); 
     } 

    } 

：

<input type=file ng-model="files" files-input multiple /> 

テストそれをここで

Answer 2

はngModelController APIと統合filesInputディレクティブがあります。

DEMO on PLNKR