【问题标题】：uploading file using angularjs and spring使用angularjs和spring上传文件
【发布时间】：2016-04-20 17:55:08
【问题描述】：

我有一个输入 type="file" 如下：

<input id="identityDocument" name="identityDocument" ng-model="candidature.identityDocument"
                 ui-jq="filestyle" type="file" class="filestyle input-lg"
                 file-model="uploadIdentityDocument"
                 ui-options="{
                    buttonText: '{{'ACTIONS.UPLOAD' | translate}}',
                    iconName: 'fa fa-inbox'
                  }"
                 accept="image/*" valid-file required>

为了让这个输入文件在我使用这个指令的范围内知道：

.directive('fileModel',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]);
        });
      });
    }
  };
});

所以我希望在提交此表单时将其中的文件上传如下：

let file = $scope.uploadIdentityDocument;
        let fd = new FormData();
        fd.append('file', file);
        $http.post('http://localhost:8080/fileUpload', fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
          })
          .success(function(){
          })
          .error(function(){
          });

在服务器端这是我的休息服务：

@RestController
    public class UploadService {
        @Autowired
        IUploadMetier uploadMetier;

        @RequestMapping(value="/fileUpload", method = RequestMethod.POST)
        public ResponseEntity<String> UploadFile(MultipartHttpServletRequest request) {
            String response = uploadMetier.uploadFile(request);
            if(response.equals("false")){
                return new ResponseEntity<>("There was an error uploading this file: " + response + " to the server :-(", HttpStatus.INTERNAL_SERVER_ERROR);
            }else{
                return new ResponseEntity<>("The file: " + response + " has uploaded successfully :-)", HttpStatus.OK);
            }
        }
}

这是上传文件的功能：

public String uploadFile(MultipartHttpServletRequest request) {
        Iterator<String> itr=request.getFileNames();
        MultipartFile file=request.getFile(itr.next());
        String fileName=file.getOriginalFilename();
        File dir = new File("\\MyPath");
        if (dir.isDirectory())
        {
            File serverFile = new File(dir,fileName);
            BufferedOutputStream stream = null;
            try {
                stream = new BufferedOutputStream(
                        new FileOutputStream(serverFile));
                stream.write(file.getBytes());
                stream.close();
            } catch (IOException e) {
                e.printStackTrace();
                return "false";
            }
        }else {
            return "false";
        }
        return fileName;
    }

但随后我收到此错误消息：

java.util.NoSuchElementException: null
    at java.util.LinkedHashMap$LinkedHashIterator.nextNode(LinkedHashMap.java:713) ~[na:1.8.0_73]
    at java.util.LinkedHashMap$LinkedKeyIterator.next(LinkedHashMap.java:734) ~[na:1.8.0_73]
    at org.capvalue.fme.metier.mpl.UploadMetierImpl.uploadFile(UploadMetierImpl.java:19) ~[classes/:na]
    at org.capvalue.fme.web.rest.UploadService.UploadFile(UploadService.java:23)

UploadMetierImpl.java:19 行指的是：MultipartFile file=request.getFile(itr.next());

我该如何解决这个问题？

编辑：

我刚刚注意到，当我在 console.log $scope.uploadIdentityDocument 时，我得到了未定义，我不知道为什么会这样！

【问题讨论】：

标签： angularjs spring spring-boot

【解决方案1】：

错误是 $scope.identityDocUpload 未定义，解决方案是删除我使用的 fileModel 指令并将其添加到我的输入中：

onchange="angular.element(this).scope().setFile(this,'identityDocumentUpload')"

setFile 函数：

$scope.setFile = function(element, name) {
      $parse(name).assign($scope, element.files[0]);
}

【讨论】：