AngularJS中如何获取和发送图片？

Question

我有 URL 想要从中获取照片。我正在使用 $http.get() 方法，但得到的是二进制响应。我怎样才能取回可以插入到页面中的内容？

$http.get('https://exampleurl/images/' + $scope.element[i].id)
                            .success(function (response) {
          // I have response such as: ""����JFIF``��;CREATOR gd-jpeg v1.0 (using IJG JPEG v80)"
                            });

Answer 1

创建一个 img 元素并且不使用 $http.get。

var imageElement = angular.element('<img />').attr('src', yourUrl);
// insert imageElement somewhere else

Answer 2

首先，您要求：

How in Angular JS obtain and send a picture?

所以，让我们看看两者...实际上，我们有 3 个问题：第 3 个是一些错误。您已经说过：

but get a binary response

如果你刚好可以从URL得到"binary"，这意味着HTTP响应缺少一些正确的MIME-TYPE的CONTENT-TYPE。你需要解决它：

Content-type: image/jpeg

好吗？

如何发送图片

如果设计模式对您很重要，请不要将其转换为 base64。因为您只需要正确处理 REST。此外，您不希望通过将 BLOB 转换为 BASE64 代码来增加 POST 请求大小。

看在上帝的份上，它有一个名为 FormData 的 JavaScript 资源。

看这里：Multipart/form-data File Upload with AngularJS

.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]);
            });
        });
    }
};
}]);

你也可以用jQuery算出来：

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false,  // tell jQuery not to process the data
contentType: false   // tell jQuery not to set contentType
});

如何获取图像

你为什么不能给他们加标签？ IMG 元素可以加载它而不会造成任何伤害。您只需要他们的 URL 地址。

AngularJS中如何获取和发送图片？

How in Angular JS obtain and send a picture?

javascript

base64

image

angularjs