Angular JS 中如何获取和发送图片？答案

【问题标题】：How in Angular JS obtain and send a picture?Angular JS 中如何获取和发送图片？
【发布时间】：2015-08-08 10:51:44
【问题描述】：

我有想要从中获取图片的 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)"
                            });

【问题讨论】：

为什么不直接创建一个img 元素而不是使用xhr？
怎么做？我从来没有这样做过。
@roan.harez 请问为什么是ajax？
我没有显示图像。
@roan.harez 好的。但是当您拥有 IMG 的 URL 时，您可以创建 IMG 并将其 SRC 设置为该 URL。可以吗？如果是这样 - 那么看看丹尼尔的解决方案

标签： javascript angularjs image base64

【解决方案1】：

首先，您要求：

Angular JS中如何获取并发送图片？

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

但得到二元响应

如果您只能从 URL 中获取“二进制”，则意味着 HTTP 响应缺少正确的 MIME-TYPE 的 CONTENT-TYPE。你需要解决它：

内容类型：图片/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 地址。

【讨论】：

【解决方案2】：

创建一个img 元素，不要使用$http.get。

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

【讨论】：

AFAIK 他没有图片 url 但字节数。
如果他使用$http.get，那么他必须。
我刚刚注意到他实际上去了一个 img url https://exampleurl/images/。我不知道为什么我认为他会去一个生成 img 的服务器。
非常感谢！这是一个解决方案！