如何在角度js和spring mvc 4

时间:2016-02-24 10:19:02

标签: angularjs json spring spring-mvc

我已经将角色js中的图像转换为64位并将其发送到我的控制器,但是当以正确的格式解码时控制器没有得到图像。我的角度js中的图像是106kb但是当我转换了我的图像时base 64图像大小在控制器中只有8个字节

html文件

<html>
<head>
<script src="extensions/angular.min.js"></script>
<script src="bower_components/angular-base64/angular-base64.js"></script>
</head>
<body ng-app="myApp" ng-controller="testcontrol">

    <input type="text" ng-model="A.username" placeholder="Enter Username" required>
    <input type="password" ng-model="A.password" placeholder="Enter Password" required>
    <input type="file" ng-model="B.img" placeholder="Browse image" required>

    <input type="button" value="Send" ng-click="setValues()" />
    <input type="button" value="Send" ng-click="getValues()" />

    <script>


        var app = angular.module('myApp', ['base64']);



        app.controller('testcontrol', function($scope, $http,$base64) {
            $scope.setValues = function() {
                alert("post");
                var a=$base64.encode($scope.B);
                $scope.A.image=a;
            console.log(a);
                $http({
                    method : 'POST',
                    url : 'form/post',
                    headers : {
                        'Content-Type' : 'application/json'
                    },
                    data : $scope.A
                }).success(function(data) {


                    alert(JSON.stringify(data));
                });
            };

            $scope.getValues = function() {
                alert("get");
                $http.get('form/get').then(
                        function(response) {
                            if (response) {
                                alert(JSON.stringify(response));
                            }
                        });
            };

        });
    </script>
</body>
</html>

春天的控制器

@Controller
@RequestMapping(value="/form")
public class Form {
    @ResponseBody
    @RequestMapping(value="/post" ,method=RequestMethod.POST)
    public String save(@RequestBody TestDto test)
    {
logger.info("username"+test.getUsername());
logger.info("password"+test.getPassword());
logger.info("image"+test.getImage());

byte[] decodedValue = Base64.getDecoder().decode(test.getImage());


try {
    FileOutputStream f=new FileOutputStream(new File("/home/shalom/Pictures/tets.png"));

    f.write(decodedValue);
    f.close();

} catch (FileNotFoundException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
} catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}

1 个答案:

答案 0 :(得分:0)

如果你在帖子请求中覆盖默认的请求转换器,它可能会起作用:

$http({
    method : 'POST',
    url : 'form/post',
    headers : {
        'Content-Type' : 'application/json'
    },
    transformRequest :  [function (data, headers) {
        //just send data without modifying
        return data;
    }],
    data : $scope.A
}).success(function(data) {

默认情况下,如果请求的数据包含JSON并修改数据,则angular会尝试检测。

有关详细信息,请参阅angular $http api docs“转换请求和响应”部分