Angular JS“表单多部分”文件上传将未定义的值发送到服务器。 无法将文件上传到Java服务器

Question

我有以下HTML。

    <form >
        <input type="file" file-model="myFile"/>
       <button ng-click="uploadFile()">upload me</button>
   </form>

在控制器内部我有以下功能

$scope.uploadFile = function() {
        var file = $scope.myFile; //when I try console.log(file...it says undefined)
       var fd = new FormData();
        fd.append('file', file);
        $http.post("url", fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined},
                transformResponse: [function (data) {
                    return data;
                }]
            }).then(function (result) {
            console.log(result.data);
        })
    }

我的指令是

 .directive('fileModel', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function(){
                    scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                    });
                });
            }
        };
    }]);

由于某种原因，我没有得到文件值。 在console.log（）上，我收到未定义的信息。 仅供参考，我只是想获取一个文件。 我的代码有问题吗？

我之所以得出这个结论，是因为它似乎已经从浏览器的开发人员工具向服务器传递了未定义的消息。 屏幕抓取如下。

Answer 1

问题是文件的非绑定问题。 Angular还没有支持。 使用此处提供的解决方案解决了该问题。 AngularJs：如何检查文件输入字段中的更改？

Answer 2

这对我有用：

<div>
    <input id="imageList" name="imageList" type="file" file-model="myFile">
</div>

我也有一个JSON对象以以下形式发送：

$scope.saveForm = function () {
      var formData = new FormData();
      var file = $scope.myFile;
      formData.append("file", file);
      var req = {
        url: '/upload',
        method: 'POST',
        headers: {'Content-Type': undefined},
        data: formData,
        transformRequest: function (data, headersGetterFunction) {
          return data;
        }
      };