Fatal编程技术网
  • javascript/
  • Javascript 如何在angular js中将html输入类型作为base 64中的文件发送到spring mvc控制器

Javascript 如何在angular js中将html输入类型作为base 64中的文件发送到spring mvc控制器

javascript html angularjs json spring

Javascript 如何在angular js中将html输入类型作为base 64中的文件发送到spring mvc控制器,javascript,html,angularjs,json,spring,Javascript,Html,Angularjs,Json,Spring,我能够将图像转换为base 64字符串，但由于某些原因，当我将其发送到服务器时，我无法恢复原始图像 这是我的代码，例如，当我解码图像时，如果我在服务器上发送一个大小为100kb的图像，我只得到8个字节 <html> <head> <script src="extensions/angular.min.js"></script> <script src="bower_components/angular-base64/angular-base6

我能够将图像转换为base 64字符串，但由于某些原因，当我将其发送到服务器时，我无法恢复原始图像 这是我的代码，例如，当我解码图像时，如果我在服务器上发送一个大小为100kb的图像，我只得到8个字节

<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>
我相信Base64编码的图像会被截断，因为。如果我是你，我会把帖子转到
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

或者，您可以使用URL对Base64字符串进行编码。

按照Johannes所说的Base64字符串的小尺寸，这一行：

var a=encodeURIComponent ($base64.encode($scope.B));
编码$scope.B，但是输入[type=file]上的模型是B.img。我不熟悉angular-base64，但这条线应该是下面的吗

var a=encodeURIComponent ($base64.encode($scope.B.img));
很抱歉将此作为答案发布，声誉不足，无法作为对该问题的评论发布。

查看HTTP帖子的原始内容，是否在标题后面有完整的base64字符串？或者它已经被截断了？图片：“dW5kZWZpbmVk”密码：“das”用户名：“sa”，如果它字面上是“dW5kZWZpbmVk”，那么图像已经在Javascript端被截断了。那么我如何避免数据被截断呢？请你给我一些想法，一个示例代码会对你有很大帮助。看看我关于URL安全编码的答案。先生，关于多部分/表单数据的问题是，我有很多图像和文本数据，其中一些图像与用户输入的文本，我想要json对象，因为使用multipart/formdata很难为我的项目映射每个图像。嗯？您可以在一个多部分/表单数据帖子中设置多个字段，就像在我的回答中一样，有
用户名
、
密码
和
文件
。先生，但是在控制器端，我必须使用multiparthttprequest，我不能在spring mvc中使用@RequestBody，它会自动将我的json转换为pojo？先生，我是spring mvc框架和angular js的初学者先生，我有没有办法将整个表单数据作为json对象传输？当然，只需添加一个json对象作为唯一字段：
fd.append（'json'，$scope.a）。或者使用
var a=encodeURIComponent（$base64.encode（$scope.B））
并坚持使用
应用程序/x-www-form-urlencoded
我尝试了var a=encodeURIComponent（$base64.encode（$scope.B））；但它仍然没有给出实际图像原始图像大小100kb转换图像大小是9字节图像：“dW5kZWZpbmVk”密码：“sa”用户名：“ads”var a=encodeURIComponent（$base64.encode（$scope.B.img））；如果我尝试这一行，我会得到一个错误，TypeError:cannotread属性'img'of undefined，这表示$scope.B未定义。尝试将
更改为
ng model=“A.image”
然后
var A=encodeURIComponent（$base64.encode（$scope.B））
to
var a=encodeURIComponent（$base64.encode（$scope.a.image））并查看控制台中打印的内容。我可以将其发送到服务器，但值与之前相同{用户名：“adssda”，密码：“sd”，图像：“dW5kZWZpbmVk”}图像：“dW5kZWZpbmVk”密码：“sd”用户名：“adssda”在谷歌搜索之后，ng模型似乎无法与文件框一起工作。尝试给该输入一个id=“myFileInput”，并使用如下行：
var a=encodeURIComponent（$base64.encode（$（'#myFileInput'）[0].files[0]），查看控制台中是否显示更多信息。未定义ReferenceError:$

var a=encodeURIComponent ($base64.encode($scope.B.img));