采用了棱角分明的js和Grails的文件上传 [英] File upload using Angular js and grails

问题描述

我想实现采用了棱角分明的js 和Grails一个文件上传。我能够调用Grails的控制方法，但没能得到使用request.getFile（）方法角的js文件。这里是我的html code，

I am trying to implement a file upload using angular js and grails. I am able to call the grails controller method but not able to get the file from angular js using request.getFile() method. Here is my html code,

<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 code，

Here is the javascript code,

//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的控制器上传方法，

Here is the grails controller upload method,

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') }

在运行此code给出象下面这样的错误，

While running this code gives a error like below,

Request.getFile（）是适用于参数类型：（java.lang.String中）值：{文件}

但可以肯定的是在控制器方法里面发生。只是没有能够从角的js得到的文件。

But definitely it is going inside the controller method. Just not able to get the file from angular js.

但是，当我使用GSP格式如下同code工作，

But the same code works when I use a gsp form like below,

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

同样的code就像一个chram并成功上传的文件。

The same code works like a chram and upload the file successfully.

推荐答案

文件说默认的文件名是文件，但添加 fileFormDataName：MYFILE 明确为：

Docs say the fileName by default is file but add fileFormDataName: "myFile" explicitly as:

$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中端，看它是否有效。

in Grails side to see if it works.

另见，而不是显式添加 fileFormDataName 只是纠正你已经删除了尾随，从文件：文件，并使用如前所述，如果这能帮助

Also see, instead of explicitly adding a fileFormDataName just rectify that you have removed the trailing , from file: file, and use as earlier, if that helps.

这篇关于采用了棱角分明的js和Grails的文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！