如何在角度js和spring mvc 4中将base64图像和textvalues作为json对象发送

I have converted my image to base 64 in angular js and send it to my controller but the controller does not get the image when decoded in the right format.The image in my angular js was 106kb but when i converted my image in base 64 the image size was only 8 bytes in controller

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

The html file

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>

The Controller in spring

控制器在春天

@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 个解决方案

#1

Maybe it works if you override the default request transformer in your post request:

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

$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) {

By default angular tries to dectect if the request's data contains JSON and modifies the data.

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

For more information see angular $http api docs section "Transforming Requests and Responses"

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

#1