Ionic Native上传图片至Firebase报错：FileReader is not a constructor

你这是在Ionic+Cordova项目里搞Firebase图片上传时踩了个常见小坑——错误地从@ionic-native/file模块里去实例化FileReader了，而这个模块根本没导出可直接用的FileReader构造函数！

错误原因 #

FileReader是浏览器/WebView原生API的一部分，不属于@ionic-native/file插件提供的功能。从Ionic Native的File模块导入FileReader，得到的不是你需要的构造函数，自然会抛出这个类型错误。

修正步骤 #

1. 移除错误导入：删掉代码里类似import { FileReader } from '@ionic-native/file/ngx';的语句
2. 改用原生FileReader：直接用全局的window.FileReader创建实例；如果是TypeScript项目怕类型报错，可以先加一句declare var FileReader: any;来规避
3. 理顺文件读取逻辑：先用Cordova的File插件正确解析文件路径拿到FileEntry，再从中获取File对象交给FileReader处理

修正后的代码示例 #

// 确保正确导入所需插件
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { File } from '@ionic-native/file/ngx';

// 组件内的uploadimage方法
uploadimage() {
  return new Promise((resolve, reject) => {
    this.fileChooser.open().then((fileUrl) => {
      // 解析本地文件路径为FileEntry
      this.file.resolveLocalFilesystemUrl(fileUrl).then((fileEntry) => {
        // 从FileEntry中获取原生File对象
        (<any>fileEntry).file((file) => {
          // 创建原生FileReader实例
          const reader = new window.FileReader();

          reader.onload = (e) => {
            // 拿到读取后的文件数据（比如base64格式的图片）
            const fileData = e.target?.result;
            // 这里写上传到Firebase的逻辑，比如用Firebase Storage的putString方法
            resolve(fileData);
          };

          reader.onerror = (err) => {
            reject(err);
          };

          // 根据需求选择读取方式，图片用readAsDataURL最合适
          reader.readAsDataURL(file);
        }).catch(err => reject(err));
      }).catch(err => reject(err));
    }).catch(err => reject(err));
  });
}

额外注意点 #

• 确认已经正确安装并配置了所有依赖的Cordova插件：cordova-plugin-file、cordova-plugin-filechooser，以及对应的Ionic Native包装器
• 必须在Cordova的platform.ready()回调之后再调用这个上传方法，确保WebView和插件都完成初始化，不然还可能出现API未定义的奇怪错误

内容的提问来源于stack exchange，提问作者ken4ward