从 ionic 2 中的 XHR 请求获取 BLOB 数据

Question

谁能告诉我如何在 ionic 2 中获取 Blob XHR 请求和 XMLHttpRequest，我必须从 api 中获取图像 url。

这是我的 Ajax 代码，我想要 ionic 2

xhr.open('GET', "https://getbytitle('LE_COE_Mapping')/items(2)/AttachmentFiles('3.jpg')/$value");
    xhr.responseType = 'blob';
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   // xhr.setRequestHeader('Authorization', 'Token token="' + token + '"');
    xhr.setRequestHeader('Authorization', token); 
xhr.onload = function (e) {

        var img = new Image();
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
        document.getElementById('Doctitle').appendChild(img);
       // alert(url.createObjectURL(this.response));
    };

    xhr.send();

请问我最近两天一直卡在这个问题里。

请帮助我。谢谢

Answer 1

我也遇到过同样的问题，然后我就这样做了:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is your final response
        console.log(this.response, typeof this.response);
        var img =  // your img syntax
        //your any custom code goes here
    }else{
  //show error message if you want to show
}
}
xhr.open('GET', 'http://Your image url');// image url be like http://ab.cd/img.png
xhr.responseType = 'blob';
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   //send authorisation if you sending token 
xhr.send();

希望对您有所帮助。

Answer 2

我在下面解决了这个问题： this.array：这是我们传递的 url 以获取特定 url 的 blob url：

const headers1 = new HttpHeaders({
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': "Bearer " + this.accessToken,
                'X-Requested-With': 'XMLHttpRequest'
              })
               const response = await this.http.get(this.array + "/$value", { headers: headers1, responseType: 'blob' }).toPromise();

              let b: any = new Blob([response], { type: 'application/octet-stream' });
              var url = window.URL.createObjectURL(b);
              console.log("this is url BLOB   " + url);

从 ionic 2 中的 XHR 请求获取 BLOB 数据

Getting BLOB data from XHR request in ionic 2

blob

xmlhttprequest

ionic-framework

ionic2