使用 jQuery 的 ajax 方法将图像检索为 blob

IT技术 javascript jquery
2021-01-20 12:17:50

我最近问了另一个（相关）问题，这导致了这个后续问题： 提交数据而不是输入表单的文件

阅读 jQuery.ajax() 文档（http://api.jquery.com/jQuery.ajax/），似乎接受的数据类型列表不包括图像。

我正在尝试使用 jQuery.get（或 jQuery.ajax，如果需要）检索图像，将此图像存储在 Blob 中，然后在 POST 请求中将其上传到另一台服务器。目前，看起来由于数据类型不匹配，我的图像最终被损坏（以字节为单位的大小不匹配等）。

执行此操作的代码如下（它是在 coffeescript 中，但应该不难解析）：

handler = (data,status) ->
  fd = new FormData
  fd.append("file", new Blob([data], { "type" : "image/png" }))
  jQuery.ajax {
    url: target_url,
    data: fd,
    processData: false,
    contentType: "multipart/form-data",
    type: "POST",
    complete: (xhr,status) ->
      console.log xhr.status
      console.log xhr.statusCode
      console.log xhr.responseText

  }
jQuery.get(image_source_url, null, handler)

如何将该图像作为 blob 检索？

3个回答

您不能使用 jQuery ajax 执行此操作，但可以使用本机 XMLHttpRequest。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

编辑

所以重新讨论这个话题，似乎确实可以用 jQuery 3 做到这一点

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhr:function(){// Seems like the only way to get access to the xhr object
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob'
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){
            
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<img id="img" width=100%>

或者

使用 xhrFields 设置 responseType

    jQuery.ajax({
            url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
            cache:false,
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            },
            error:function(){
                
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <img id="img" width=100%>

@jabalsad 提出的问题How can I retrieve this image as a blob instead?，无论如何这只是为了演示它，handler将把它this.response添加到一个 formdata 对象并通过 ajax 发送它。
2021-03-21 12:17:50
2017：jQuery 仍然无法处理类型“blob”？
2021-03-23 12:17:50
'xhrFields' 也适用于 jQuery 2（在 2.2.4 中测试）
2021-03-27 12:17:50
+1，效果很好！仅供参考，这可能最终会很快添加到 jQuery：github.com/jquery/jquery/pull/1525
2021-04-01 12:17:50
谢谢。我刚刚想通了，看到了你的答案。它与我的相似（除了我将它发布到表单而不是将它设置在 <img> 对象上）。无论如何，我会将其标记为正确:)
2021-04-06 12:17:50

如果您需要使用jQuery.AJAX处理错误消息，您将需要修改该函数，以便在发生错误时不会修改该函数。xhrresponseType

因此，仅当调用成功时，您才必须将其修改responseType为“ blob ”：

$.ajax({
    ...
    xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 2) {
                if (xhr.status == 200) {
                    xhr.responseType = "blob";
                } else {
                    xhr.responseType = "text";
                }
            }
        };
        return xhr;
    },
    ...
    error: function(xhr, textStatus, errorThrown) {
        // Here you are able now to access to the property "responseText"
        // as you have the type set to "text" instead of "blob".
        console.error(xhr.responseText);
    },
    success: function(data) {
        console.log(data); // Here is "blob" type
    }
});

笔记

如果在将 设置xhr.responseType为“ blob ”后立即调试并在该点放置断点，您会注意到，如果您尝试获取该值，responseText您将收到以下消息：

仅当对象的“responseType”为“”或“text”（为“blob”）时才可访问该值。

非常感谢你！这是我正在寻找的解决方案。我需要 AJAX 将成功的响应处理为方法中的“blob”（在我的情况下为 ZIP 存档）.done()，如果出现问题，则.fail()方法中的响应应作为“文本”处理，否则responseText为空等。这个解决方案非常适合我！
2021-03-19 12:17:50

非常感谢@Musa，这是一个将数据转换为 base64 字符串的简洁函数。在获取二进制文件的 WebView 中处理二进制文件（pdf、png、jpeg、docx 等）文件时，这可能对您有用，但您需要将文件的数据安全地传输到您的应用程序中。

// runs a get/post on url with post variables, where:
// url ... your url
// post ... {'key1':'value1', 'key2':'value2', ...}
//          set to null if you need a GET instead of POST req
// done ... function(t) called when request returns
function getFile(url, post, done)
{
   var postEnc, method;
   if (post == null)
   {
      postEnc = '';
      method = 'GET';
   }
   else
   {
      method = 'POST';
      postEnc = new FormData();
      for(var i in post)
         postEnc.append(i, post[i]);
   }
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200)
      {
         var res = this.response;
         var reader = new window.FileReader();
         reader.readAsDataURL(res); 
         reader.onloadend = function() { done(reader.result.split('base64,')[1]); }
      }
   }
   xhr.open(method, url);
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xhr.send('fname=Henry&lname=Ford');
   xhr.responseType = 'blob';
   xhr.send(postEnc);
}
其它你可能感兴趣的问题
上一篇在后台打开一个新标签页？ 下一篇使用点符号字符串访问对象子属性