如何从src中具有blob URL的图像标记通过JSON发送图像数据?

时间:2016-10-26 06:22:16

标签: javascript java jquery angularjs json

我正在开发一个项目,该项目在后端使用Angularjs作为FrontEnd和Java Webservices。我正在尝试上传并通过JSON发送图像。

上传时的图片会在src中生成blob网址(blob:http://localhost/a34ac19f-3320-4cdf-b30f-e1b0a0e7a745。如何读取它并将其转换为Base64或其他可以通过JSON发送的类型?

1 个答案:

答案 0 :(得分:0)

首先在控制器下方添加此自定义目录:

app.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

然后在你的视图中使用它:

 <input type = "file" name="files" file-model = "myFile"/>

在您的控制器功能中,当您提交表格时:

这样做:

$scope.formSubmit = function(){
         var file = $scope.myFile;
         var fd = new FormData();
         fd.append('profilepic', file);
         fd.append('action', 'add');

         $http.post('yourjavafile', fd, {
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined}
                }).success(function (response) {

                        if (response) {

                        } else {

                        }
                    });;
}