使用Angular js和grails上传文件

时间:2014-03-25 15:49:54

标签: angularjs grails file-upload

我正在尝试实施file upload using angular js和grails。我能够调用grails控制器方法,但无法使用request.getFile()方法从angular js获取文件。这是我的HTML代码,

<script src="angular-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script>
<script src="angular-file-upload.min.js"></script> 

<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" name="file" ng-file-select="onFileSelect($files)" >
  <div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class"
        ng-show="dropSupported">drop files here</div>
  <div ng-file-drop-available="dropSupported=true" 
        ng-show="!dropSupported">HTML5 Drop File is not supported!</div>
  <button ng-click="upload.abort()">Cancel Upload</button>
</div>

这是javascript代码,

//inject angular file upload directives and service.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'GrailsApp/upload', //upload.php script, node.js route, or servlet url
        data: {myObj: $scope.myModelObj},
        file: file, // or list of files: $files for html5 only
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];

这是grails控制器上传方法,

def upload() {
    def f = request.getFile('file')
    if (f.empty) {
        flash.message = 'file cannot be empty'
        render(view: 'uploadForm')
        return
    }
f.transferTo(new File('D:/Filestorage/myfile.txt')) response.sendError(200, 'Done') }

运行此代码时会出现如下错误,

Request.getFile() is applicable for argument types: (java.lang.String) values: {"file"}

但绝对是在控制器方法内部。只是无法从角度js获取文件。

但是当我使用下面的gsp表单时,相同的代码可以正常工作

<g:uploadForm action="upload">
    <input type="file" name="file" />
    <input type="submit" />
</g:uploadForm>

相同的代码就像chram一样工作并成功上传文件。

2 个答案:

答案 0 :(得分:1)

问题已修复。只需要通过在$ scope.upload方法中添加fileFormDataName:“file”来使用名称绑定帖子。

以下是一个示例,

//inject angular file upload directives and service.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'GrailsApp/upload', //upload.php script, node.js route, or servlet url
        data: {myObj: $scope.myModelObj},
        file: file,
        fileFormDataName:'file'
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];

答案 1 :(得分:1)

文档说默认情况下,fileName为file,但明确添加fileFormDataName: "myFile"为:

$scope.upload = $upload.upload({
    url: 'GrailsApp/upload', //upload.php script, node.js route, or servlet url
    data: {myObj: $scope.myModelObj},
    file: file,
    fileFormDataName: "myFile"
}).progress(function(evt) {
    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
});

以角度为单位,然后将文件作为

request.getFile('myFile') 
在Grails方面看看它是否有效。

另请参阅,而不是明确添加fileFormDataName只是纠正您已从,中移除了file: file,,并在之前使用,如果有帮助的话。