Angularjs formData.append不工作

您好我正在开发angularjs应用程序。我有文件上传模块。我正在将文件数据附加到FormData中，如下所示。Angularjs formData.append不工作

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

这是上传功能

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

这是HTML代码。

<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()">

Eventough我有文件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里面有文件。请参阅屏幕截图。

我的filesformdata FormData总是空的。我可以帮助解决这个问题吗？谢谢。

来源

2017-06-06 Niranjan Godbole

虽然张贴什么是在你的网络中的报头部分中所示tab.If它是存在的，那么问题不在于FORMDATA附加但在其他地方 – Vivz

你可以发布更多的代码？ – Vivz

谢谢。我添加了更多的代码。 –

通过使用console.log（）检查FormData对象filesformdata中的数据并未透露。它在那里，你看不到它。但是，您可以在请求有效负载下的网络选项卡中查看它。

来源

2017-06-06 11:38:59 Vivz

谢谢。我添加了从网络选项卡捕获的屏幕截图。我没有看到任何东西。 –

它是否在您的http请求到服务器的成功或错误部分？ – Vivz

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; UploadedLeaseFiles totalDocumentInserted = null; for（int iCnt = 0; iCnt <= hfc.Count - 1; iCnt ++）这里的计数是0.这意味着我没有收到任何文件。 –

这里是一个filesInput指令，与ngModelController API集成：

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

用法：

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

与测试：

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

    }

你会发现，formData.append作品。

的DEMO on PLNKR

来源

2017-06-06 21:36:29 georgeawg

Angularjs formData.append不工作

回答

相关问题