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不工作

回答

相關問題