0

我正在使用 AngularJS 开发 Grails (2.3.7) 应用程序。我必须在我的应用程序中上传文件。由于前端由 Angular 管理，我从 Angular 控制器上传我的文件。我已经经历了这个 和这个讨论，并尝试上传如下。

我的文件上传器是

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

       };

}])

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

    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"    

                              }

                       }

}

但问题是我500 (Internal Server Error) 从 grails 得到一个。文件未上传。

也得到响应，Cannot invoke method isEmpty() on null object 这意味着文件尚未发送到服务器。这是什么问题..请帮助..

4

1 回答 1

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);
于 2015-02-20T18:41:27.577 回答