时间戳

首页 > 解决方案 > Ionic 3 FireReader 不工作，但 Ionic 4 可以

angular - Ionic 3 FireReader 不工作，但 Ionic 4 可以

问题描述

我在两台不同的计算机上构建了我的 Ionic 项目并得到了不同的结果。

第一台电脑：Ionic Info

离子：

离子（离子 CLI）：4.2.1（/usr/local/lib/node_modules/ionic）离子框架：离子角 3.9.2 @ionic/app-scripts：3.2.0

科尔多瓦：

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.1 Cordova Plugins : 没有列入白名单的插件（总共 19 个插件）

系统：

NodeJS：v8.11.3 (/usr/bin/node) npm：6.2.0 操作系统：Linux 4.15

FileReader 仅在我将 await 放入 reader.readAsDataURL(); 时才起作用；

第二台电脑：

离子信息

cli 包：（/usr/local/lib/node_modules）

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

全局包：

cordova (Cordova CLI) : 8.0.0

本地包：

@ionic/app-scripts : 3.1.8
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

我的代码：

async downloadFromURL(fileName, mimeType, url){
    return new Promise((resolve,reject) => {
        try{
            var self = this;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType='blob';  
            xhr.onloadend = async function(e) {
                if (xhr.status == 200)
                {
                    var reader = new FileReader();
                    reader.onloadend = async function(event){
                        var response = self.insertFile({
                            'type': mimeType,
                            'title': fileName
                        }, event.target["result"].split(',')[1]);
                        resolve(response);
                    }
                    await reader.readAsDataURL(xhr.response);
                }
            };
            xhr.send();
        } catch (error) {
            reject();
            console.log("error", error);
        }
    });
}

所以，我的问题是如何在不更新 ionic 和 cordova 的情况下解决这个问题？

对不起我的英语不好：D

提前致谢。

标签： angularcordovaionic-frameworkionic3

解决方案

在您index.html尝试将脚本标签cordova.js从标题移动到正文中，在build/polyfills.js脚本标签下方。我的身体标签现在看起来像这样：

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>

根据这篇文章，显然这是 zone.js 的一个已知问题。

推荐阅读