[AngularJS] Flow.js 이용한 이미지 업로드 (Base 64)

Flow.js는 HTML5기반의 업로드를 도와주느 자바스크립트 라이브러리이다.

Angular 용으로 ng-flow를 제공해주고 있다.

HTML5 FileReader 를 이용하여 base64기반으로 업로드를 해보았다. 

HTML

<div flow-init
     flow-files-submitted="$flow.upload()"
     flow-files-added="processFiles($files)">
   <div class="drop" flow-drop="" ng-class="dropClass">
        <span class="btn btn-primary" flow-btn >이미지 선택</span>
        <button ng-click="imageUpload()" class="btn btn-info">업로드</button>
    </div>
        <div ng-repeat="file in $flow.files track by $index" class="motelRoom">
            <span>{{file.name}}</span>
                <div class="thumbnail" ng-show="$flow.files.length">
                    <img flow-img="file"/>
                </div>
                <div class="progress progress-striped"ng-class="{active:file.isUploading()}">
                    <div class="progress-bar" role="progressbar"
                         aria-valuenow="{{file.progress() * 100}}"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         ng-style="{width: (file.progress() * 100) + '%'}">
                        <span class="sr-only">{{file.progress()}}% Complete</span>
                </div>
                </div>
                <div class="btn-group">
                    <a class="btn btn-xs btn-danger" ng-click="file.cancel()">취소</a>
                </div>
        </div>
</div>

Controller 부분 

$scope.images= [];

$scope.processFiles = function(uploadImages){
    angular.forEach(uploadImages, function(flowFile, i){
        var fileReader = new FileReader();
            fileReader.onload = function(event){
                var uri = event.target.result;
                    $scope.images[i] = uri;
            };
        fileReader.readAsDataURL(flowFile.file);
    });
};
$scope.imageUpload=function(){
    var sliceImage=$scope.images[0];
    var sliceImageArray=sliceImage.split(',');
    $http.post('/imageUpload',sliceImageArray[1]);

};

Server (스프링, JAVA8)

@RequestMapping(value = "imageUpload", method = RequestMethod.POST)
public @ResponseBody String imageUpload(@RequestBody String images){
    byte[] bytes= Base64.getMimeDecoder().decode(images);
try {
    FileOutputStream imagesOutFile = 
new FileOutputStream("d:/images/"+"test.jpeg");
    imagesOutFile.write(bytes);
    imagesOutFile.close();
} catch (FileNotFoundException e) {
    e.printStackTrace();
} catch (IOException ioe){
    ioe.printStackTrace();
}    
    return null;
}

참고 :  http://sysgears.com/notes/get-a-base64-encoded-image-using-ng-flow-in-angularjs/