uniapp app平台出现ReferenceError: FileReader is not defined如何解决

在uniapp开发App时遇到ReferenceError: FileReader is not defined错误，该如何解决？FileReader在H5端正常使用，但打包成App后报错，是因为App平台不支持这个API吗？有没有替代方案或兼容方法？求大神指点！

2 回复

在uniapp中，FileReader在H5端可用，但App端不支持。解决方案：

  1. 使用uni.getFileSystemManager()读取文件
  2. 或用uni.chooseImage选择图片后通过base64处理
  3. 也可用plus.io.*相关API

推荐使用uni官方API替代FileReader。


在 UniApp 的 App 平台（如 H5+ 或原生渲染环境）中，FileReader 是浏览器环境特有的 API，在非 H5 平台（如 iOS、Android）可能不被支持，因此会出现 ReferenceError: FileReader is not defined 错误。

解决方案

  1. 使用 UniApp 提供的文件 API
    在 App 平台，应使用 uni.chooseFile 和 uni.getFileSystemManager() 等原生 API 处理文件读取。

    示例代码：

    // 选择文件
uni.chooseFile({
  count: 1,
  success: (res) => {
    const tempFile = res.tempFiles[0];
    // 使用文件路径进行后续操作
    this.readFile(tempFile.path);
  }
});

// 读取文件内容（App 平台）
readFile(filePath) {
  const fs = uni.getFileSystemManager();
  fs.readFile({
    filePath: filePath,
    encoding: 'utf-8', // 根据文件类型调整编码
    success: (res) => {
      console.log('文件内容:', res.data);
    },
    fail: (err) => {
      console.error('读取失败:', err);
    }
  });
}

  2. 条件编译处理平台差异
    使用 #ifdef 和 #endif 区分 H5 与 App 平台，确保代码兼容性。

    示例代码：

    // #ifdef H5
// 使用 FileReader（仅 H5 平台）
const reader = new FileReader();
reader.onload = (e) => {
  console.log('H5 文件内容:', e.target.result);
};
reader.readAsText(file);
// #endif

// #ifdef APP-PLUS
// App 平台使用 uni API
this.readFile(filePath);
// #endif

  3. 检查运行环境
    在代码中动态判断平台，避免在不支持的环境调用 FileReader。

    示例代码：

    if (typeof FileReader === 'undefined') {
  // 使用 UniApp 的替代方案
  console.warn('当前平台不支持 FileReader，使用 uni API');
} else {
  // 使用标准 FileReader
}

注意事项

  • 文件路径：App 平台获取的是临时路径（如 _doc/、_www/），需通过 uni.getFileSystemManager() 操作。
  • 文件类型：二进制文件（如图片）需使用 'binary' 编码，文本文件使用 'utf-8'。
  • 权限问题：在 App 平台确保已配置必要权限（如存储访问）。

通过上述方法，可解决 App 平台 FileReader 未定义的问题，并保持多平台兼容性。

回到顶部