Question

我正在使用AngularJS处理Grails（2.3.7）应用程序。我要在我的应用程序中上传文件。由于前端由Angular管理，我从Angular控制器上传我的文件。我经历过This 和this讨论，并尝试上传如下。

我的文件上传器是

<input type="file" ng-file-select="onFileSelect($files)">

角度控制器

myapp.controller('createWebController',['$scope','$http','$upload',function($scope,$http,$upload){

       $scope.onFileSelect = function($files) {

                                                               var file = $files[0];
                                                               console.log(file)
                                                         $upload.upload({
                                                             url: 'UploadLogo/upload', //upload.php script, node.js route, or servlet url

                                                             file: file,
                                                             method: 'POST' ,
                                                             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);
                                                          })
                                                                  .error(function(data){ console.log(data)})
                                                           ;

       };

}]）

在服务器上，我正在使用this service，上传处理程序代码是

    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.springframework.web.multipart.commons.CommonsMultipartFile;
    import org.springframework.web.multipart.MultipartFile
    import org.codehaus.groovy.grails.web.context.ServletContextHolder


       class UploadLogoController {
          FileUploadService fileUploadService

                 def upload() {

                     def avatarImage = request.getFile('file')
                      if (!avatarImage.isEmpty()) 
                              {
        userInstance.avatar = fileUploadService.uploadFile(avatarImage, "logo.png", "~/Desktop/upload")                                   
                              render "ok"
                              }
                             else
                               {
                                render "Empty"    

                              }

                       }

}

但问题是我从grails获得500 (Internal Server Error)。该文件未上载。

也获得了Cannot invoke method isEmpty() on null object的回复这意味着该文件尚未发送到服务器。这里的问题是什么..请帮助..

Answer 1

试试这种方式。您可以为文件上载控件

创建自定义指令

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

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

并在您的html中使用<input type="file" ng-file-model="myFile" />

然后，您可以创建自定义服务来执行文件上载。请注意，创建服务不是必需的，但只需注入服务就可以轻松地在以后的文件上传中重复使用。

myapp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl,filename){
    var fd = new FormData();
    fd.append('file', file);
    fd.append('filename', filename);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(data){
        console.log(data)
    })
    .error(function(data){ console.log(data)
    });
};}]);

uploadFileToUrl有3个参数，文件本身，要上传的URL和要保存的文件名。（您可以根据需要自定义）。使用$http.post发布数据。

最后在你的控制器中，包括这个

var file = $scope.myFile;
var filename = 'YourFileName'
var uploadUrl = '/UploadLogo/upload'  // don't forget to include the leading / 
fileUpload.uploadFileToUrl(file, uploadUrl,filename);

使用角度js在Grails应用程序中上传文件

1 个答案: