记 Ionic 下文件操作的一个 BUG

问题描述:

无论使用 Ionic 封装的 import { File } from '@ionic-native/file';,还是直接使用 Cordova 插件 cordova-plugin-file, 写文件都是正常的,但是读文件就不会触发函数调用之后的操作,无论是使用以下何种方法:

  • IN IONIC NATIVE:
    • readAsText(path, file).then().catch();
    • readAsDataURL(path, file).then().catch();
    • readAsBinaryString(path, file).then().catch();
    • readAsArrayBuffer(path, file).then().catch();
  • IN CORDOVA:
    document.addEventListener('deviceready', () => {
      window.resolveLocalFileSystemURL(cordova.file.applicationStorageDirectory, root => {
        alert(JSON.stringify(root));
        root.getFile('demo.txt', { create: true }, fileEntry => {
          alert(JSON.stringify(fileEntry));
          fileEntry.file(function (file) {
            var reader = new FileReader();
            reader.onloadend = function () {
              console.log("Successful file read: " + this.result);
              displayFileData(fileEntry.fullPath + ": " + this.result);
            };
            reader.readAsText(file);
            // OR reader.readAsDataURL(file);
            // OR reader.readAsBinaryString(file);
            // OR reader.readAsArrayBuffer(file);
          }, onErrorReadFile);
        }, error => {
          alert(JSON.stringify(error))
        });
      }, error => {
        alert(JSON.stringify(error))
      });
    });
    

IONIC 并不能 resolvereject,在 CORDOVA 中不能触发后续函数。

解决方案:

参照以下资料:

原因看起来是 zone.js 冲突,因为我菜嘛,就不细细去看了,具体解决的做法就是在 index.html 中把 <script src="build/polyfills.js"></script> 这行代码放到最前面就可以了。

总结

我在 Google 中是这么搜的:nothing happened ionic file readAsDataURL,再次不得不感叹 Google 的强大。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容