uniapp 如何读取文件

在uniapp中如何读取本地文件？比如txt或json文件，需要用到什么API？希望了解具体的代码实现和注意事项。

2 回复

在uni-app中读取文件，可以使用uni.chooseFile选择文件，然后通过FileReader读取内容。注意H5端可直接读取，App端需使用plus.io相关API，小程序端有特定限制。


在 UniApp 中，读取文件的方法取决于文件来源（如本地存储、用户选择或网络下载）。以下是常见场景及实现方式：

1. 读取本地静态文件（如 JSON、文本）

使用 require 或 import 直接导入项目内的静态文件：

// 读取 JSON 文件
const data = require('@/static/data.json');
console.log(data);

// 读取文本文件（需放在 static 目录）
// 注意：仅支持打包时存在的文件，无法动态修改

2. 读取用户选择的文件（如图片、文档）

通过 uni.chooseFile 获取用户设备文件，再通过 FileReader 读取内容：

uni.chooseFile({
  count: 1,
  success: (res) => {
    const file = res.tempFiles[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      console.log(e.target.result); // 文件内容
    };
    reader.readAsText(file); // 以文本形式读取
  }
});

3. 读取应用内部存储文件

使用 uni.getFileSystemManager() 访问本地文件系统（仅小程序端）：

const fs = uni.getFileSystemManager();
fs.readFile({
  filePath: `${wx.env.USER_DATA_PATH}/example.txt`,
  encoding: 'utf-8',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error('读取失败', err);
  }
});

4. 读取网络文件

先下载到临时目录，再读取内容：

uni.downloadFile({
  url: 'https://example.com/file.txt',
  success: (res) => {
    if (res.statusCode === 200) {
      const fs = uni.getFileSystemManager();
      fs.readFile({
        filePath: res.tempFilePath,
        encoding: 'utf-8',
        success: (fileRes) => {
          console.log(fileRes.data);
        }
      });
    }
  }
});

注意事项：

  • 平台差异：H5 端部分 API（如 getFileSystemManager）不可用，需用浏览器标准 API 替代。
  • 安全限制：无法直接访问设备任意路径，仅能操作指定目录（如临时文件、用户数据目录）。
  • 文件类型：文本、JSON 等小文件可直接读取，大文件建议分片处理。

根据具体需求选择合适方案，并注意测试多端兼容性。

回到顶部