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 は、ファイル自体、アップロードする URL、保存するファイル名の 3 つの引数を取ります (これは必要に応じてカスタマイズできます)。を使用し$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 に答える