XMLHttpRequest 错误 |斑点 |角 5 | Firebase 存储

Question

我正在尝试在 Ionic 3 应用程序中返回一个用于 Firebase 存储上传的 blob。在 iOS 模拟器中（尚未在 iPhone 上测试）它可以工作，但在为 Android 构建并在手机上运行后，它返回“加载错误”。知道为什么会这样吗？

  loadXHR(url) {
    return new Promise(function (resolve, reject) {
      try {
        var xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.responseType = "blob"
        xhr.onerror = function () { reject("Network error.") }
        xhr.onload = function () {
          if (xhr.status === 200) { resolve(xhr.response) }
          else { reject("Loading error:" + xhr.statusText) }
        }
        xhr.send()
      }
      catch (err) { reject(err.message) }
    })
  }

文件 url 用于使用 Ionic 的相机插件从手机图库中选择的图像，然后裁剪。

file:///storage/emulated/0/Android/data/io.app.events/cache/1535133947691-cropped.jpg

Answer 1

从 API URL 下载 BLOB 数据。你可以试试这个代码。

    loadXHR(url) {
        return new Promise(function (resolve, reject) {
          try {

             var oReq = new XMLHttpRequest();
             oReq.open("GET", URL, true);
             // Define how you want the XHR data to come back
             oReq.responseType = "blob";
             oReq.onload = function (oEvent) {
                var blob = oReq.response; // Note: not oReq.responseText
                if (blob) {

                    var url = window.URL.createObjectURL(blob);
                    document.getElementById('bot-img').src = url;
                    // Or read the data with a FileReader
                    var reader = new FileReader();
                    reader.addEventListener("loadend", function() {
                       // reader.result contains the contents of blob as text
                    });
                    reader.readAsText(blob);
                } else console.error('we didnt get an XHR response!');
            };
            oReq.send(null);

         } catch (err) { reject(err.message) }
    })
  }