0

我正在使用 angularjs 进行文件上传。在发送到后端之前，我无法获取文件对象内容。XHR，标题：

XHR-标头

我不知道为什么，因为我可以在我的日志中获取内容。控制台日志：

日志

这些是我的代码：html：

<body ng-app="myApp" ng-controller="appCtrl">
     <input type="file" id="file" name="files" accept="text/*" 
            data-url="file" class="inputfile_upload" select-ng-files
            ng-model="uploadedFile"/>
     <label for="file"> <span id="chooseFile"></span>Upload a file!</label>
     <button id="submitBtn" type="submit" ng-click="upload()">Upload</button>
</body>

控制器.js：

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){

    $scope.upload = function() {
       var file = $scope.uploadedFile; 
       console.log('file is ' );
       console.dir(file);

       var uploadUrl = "/uploaded_file";
       fileUploadService.uploadFileToUrl(file, uploadUrl);
    };
}

服务.js：

app.factory('fileUploadService', function ($rootScope, $http) {
    var service = {};
    service.uploadFileToUrl = function upload(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function successCallback(response){
            console.log("Files added");
        }, function errorCallback(response){
            console.log("Files not successfully added");
        })    
    }
    return service;
});

指令.js：

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

0 回答 0