如何在angular js和spring mvc 4中将base64图像和文本值作为json对象发送答案

【问题标题】：how to send base64 images and textvalues as json object in angular js and spring mvc 4如何在angular js和spring mvc 4中将base64图像和文本值作为json对象发送
【发布时间】：2016-02-24 10:19:02
【问题描述】：

我已将我的图像转换为 angular js 中的 base 64 并将其发送到我的控制器，但是当以正确的格式解码时控制器没有得到图像。我的 angular 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();
}

【问题讨论】：

标签： angularjs json spring spring-mvc

【解决方案1】：

如果您在发布请求中覆盖默认请求转换器，也许它会起作用：

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

默认情况下，Angular 会尝试检测请求的数据是否包含 JSON 并修改数据。

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

【讨论】：

当我尝试这段代码时，我得到 http 400 OST localhost:8080/app/form/post 400 (Bad Request) Th angular request is not going to controller
你的 spring 控制器必须是这样的 @ResponseBody @RequestMapping(value ="/form/post", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE) public void receiveBase64(@RequestBody String base64 ){ System.out.println(base64); }