AngularJS如何将 html 输入的类型为以基数为 64 的角 js 文件发送到Spring mvc 控制器

发布时间: 2017/4/16 20:32:54
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

enter image description here我能够将图像转换 base 64 字符串,但出于某种原因,当我把它发送到服务器我无法回到这里原始的图像是我的代码,例如如果时我对我得到只有 8 个字节的图像进行解码在服务器发送图像大小 100 kb

<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=encodeURIComponent ($base64.encode($scope.B));
               console.log(a);
                $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>

这里是我的控制器逻辑

package com.brian.app.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Base64;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.brian.app.dto.TestDto;


@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();
}




logger.info("save");    
    return "success";
    }
    @ResponseBody
    @RequestMapping(value="/get" ,method=RequestMethod.POST)
    public String saveget()
    {

logger.info("get"); 
    return "success";
    }
    private static final Logger logger = Logger.getLogger(Form.class);
}

解决方法 1:

我相信 Base64 编码图像获取截断,因为Base64 不是安全的 URL。如果我是你,我会移动到邮政 multipart/formdata :

var fd = new FormData();
fd.append('username', test.getUsername());
fd.append('password', test.getPassword());
fd.append('image', test.getImage());
$http.post('/rest/v1/my/endpoint', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
})
.success(function(data){
    ...

然后你还需要注释你Spring控制器接受 multipart/formdata

或者,您可以对 Base64 进行 URL 编码的字符串。

官方微信
官方QQ群
31647020