복붙노트

[SPRING] 각도 js spring mvc를 사용하여 멀티 파트 파일을 업로드하는 방법

SPRING

각도 js spring mvc를 사용하여 멀티 파트 파일을 업로드하는 방법

angularjs 및 스프링 MVC를 사용하여 파일을 업로드하려고합니다.

application-context.xml에 multipartResolver 빈을 가지고있다.

    <mvc:annotation-driven />

    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="2097152" />
    </bean>

내 양식은 다음과 같습니다.

<form method="post" id="fromFileUpload" enctype="multipart/form-data"
                ng-submit="continueFileUpload()">
        <div class="form-group">
            <label class="control-label col-sm-4 col-xs-12" for="quoteIdentifier">Quote Identifier : </label>
                <div class="col-xs-4 input-max">
                    <select type="text" class="form-control " name="quoteIdentifier" id="quoteIdentifier" ng-model="quoteIdentifier" ng-options="">
                    <option style="display: none" value="">Choose</option>
                    </select>
                </div>
                </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-xs-12" for="file">Please upload the file : <span class="required">*</span> </label>
            <div class="col-xs-4 input-max controls ">
                <input class="inline-block" type="file" name="file" ng-model="file" data-rule-required="true" id="file"         accept=".csv,.xsl,.xml,.mpp,application/vnd.ms-excel">
            </div>
            <span id="vaildFile" class="text-success icon-ok hide">Valid File</span> <span id="invaildFile" class="text-error icon-remove hide"> Invalid File</span>
        </div>
        <div class="box-header">
            <div class="actions">   
            <button type="submit" class="btn btn-primary">
                <i class="icon-arrow-right"></i> Continue
            </button>           
                </div>
        </div>    
</form>

$scope.continueFileUpload=function (){
var uploadUrl=serverUrl+"continueFileUpload";
var formData=new FormData();
formData.append("file",file.files[0]);
 $http({
        method: 'POST',
        url: uploadUrl,
        headers: {'Content-Type': false},
        data: formData,
        transformRequest: function(data, headersGetterFunction) {
                        return data;
         }
     })
    .success(function(data, status) {   
                    alert("success");
     })

};

스프링 컨트롤러 :

@Controller
public class FileUploadController {
@RequestMapping(value = "/continueFileUpload", method = RequestMethod.POST)
    @ResponseBody
    public String continueFileUpload(HttpServletRequest request,
            HttpServletResponse response){
     MultipartHttpServletRequest mRequest;
        try {
            mRequest = (MultipartHttpServletRequest) request;
            mRequest.getParameterMap();

            Iterator<String> itr = mRequest.getFileNames();
            while (itr.hasNext()) {
                MultipartFile mFile = mRequest.getFile(itr.next());
                String fileName = mFile.getOriginalFilename();
                System.out.println(fileName);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
return null;
    }

헤더에 multipart / form-data를 추가 할 때 ** multipart 경계가 발견되지 않았기 때문에 ** 요청이 거부되었습니다 ** 예외

만약 내가 추가하지 않으면 org.apache.catalina.connector.RequestFacade가 org.springframework.web.multipart.MultipartHttpServletRequest에 캐스트 될 수 없다.

해결법

  1. ==============================

    1.

    $scope.continueFileUpload=function (){
    var uploadUrl=serverUrl+"continueFileUpload";
    var formData=new FormData();
    formData.append("file",file.files[0]);
     $http({
            method: 'POST',
            url: uploadUrl,
            headers: {'Content-Type': undefined},
            data: formData,
            transformRequest: function(data, headersGetterFunction) {
                            return data;
             }
         })
        .success(function(data, status) {   
                        alert("success");
         })
    
    };
    
  2. ==============================

    2.지시문을 작성하는 것이 가장 유용합니다. 다음 지시문을 사용할 수 있습니다.

    지시문을 작성하는 것이 가장 유용합니다. 다음 지시문을 사용할 수 있습니다.

    var myApp = angular.module('myApp', []);
    
    myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
    
            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
    }]);
    

    서비스:

    myApp.service('fileUpload', ['$q','$http', function ($q,$http) {
    var deffered = $q.defer();
    var responseData;
    this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    return $http.post(uploadUrl, fd, {
    transformRequest: angular.identity,
     headers: { 'Content-Type' : undefined}
    })
    .success(function(response){
    
    /* $scope.errors = response.data.value; */
    
    
    console.log(response);
     responseData = response;
     deffered.resolve(response);
     return deffered.promise;
     })
     .error(function(error){
     deffered.reject(error);
     return deffered.promise;
     });
    
    }
    
    this.getResponse = function() {
     return responseData;
     }
    
    }]);
    

    제어 장치:

    myApp.controller('myCtrl', ['$scope', '$q', 'fileUpload', function($scope, $q, fileUpload){
     $scope.dataUpload = true;
     $scope.errVisibility = false;
     $scope.uploadFile = function(){
     var file = $scope.myFile;
     console.log('file is ' );
     console.dir(file);
    
    var uploadUrl = "<give-your-url>/continueFileUpload";
     fileUpload.uploadFileToUrl(file, uploadUrl).then(function(result){
     $scope.errors = fileUpload.getResponse();
     console.log($scope.errors);
     $scope.errVisibility = true;
     }, function(error) {
     alert('error');
     })
    
    };
     }]);
    

    HTML :

    <div ng-controller = "myCtrl">
        <div class="jumbotron">
        <input type="file" file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
                    <div ng-show="errVisibility" class="alert alert-danger fade in">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    <strong>Errors!</strong> {{errors.data.value}}
                    </div>
    </div>
    

    angularjs에서 지시어를 처음 사용하는 사람에게 처음부터 이것을 사용하는 방법을 알려주는 다음 링크를 확인하십시오. AngularJS를 사용하는 봄 MVC 파일 업로드

    파일 업로드에 정말 좋습니다.

  3. from https://stackoverflow.com/questions/23810352/how-to-upload-a-multipart-file-using-angular-js-spring-mvc by cc-by-sa and MIT license