uniapp filereader使用方法

在uniapp中如何使用FileReader读取本地文件？我在尝试读取用户选择的图片或文本文件时遇到了问题，不知道如何正确初始化FileReader对象和处理读取结果。希望能提供一个完整的示例代码，包括如何监听文件选择事件、读取文件内容以及处理可能的错误情况。另外，FileReader在uniapp的H5端和App端的使用方法是否有区别？

2 回复

在uni-app中使用FileReader读取文件，可通过uni.chooseFile选择文件，然后创建FileReader实例，使用readAsDataURL等方法读取文件内容，通过onload事件获取结果。


在 UniApp 中使用 FileReader 对象可以读取用户选择的本地文件（如图片、文本等），常用于文件预览或上传前的处理。以下是基本使用方法及示例代码：

步骤说明：

  1. 选择文件：使用 uni.chooseFile API 选择文件。
  2. 创建 FileReader：实例化 FileReader 对象。
  3. 读取文件：调用 readAsDataURL 或 readAsText 等方法。
  4. 处理结果：通过 onload 事件获取文件内容。

示例代码（读取图片并预览）：

// 选择文件
uni.chooseFile({
  count: 1, // 选择数量
  type: 'image', // 文件类型
  success: (res) => {
    const file = res.tempFiles[0]; // 获取文件对象
    const reader = new FileReader();
    
    // 读取为 DataURL（Base64 格式）
    reader.readAsDataURL(file);
    
    // 读取完成回调
    reader.onload = (e) => {
      const base64 = e.target.result; // 获取 Base64 数据
      console.log('文件Base64:', base64);
      // 可用于预览：将 base64 赋值给 <image> 的 src
      this.imageSrc = base64;
    };
    
    // 错误处理
    reader.onerror = (err) => {
      console.error('文件读取失败:', err);
    };
  },
  fail: (err) => {
    console.error('文件选择失败:', err);
  }
});

其他读取方法：

  • readAsText(file)：读取为文本，适用于 .txt、.json 等文件。
  • readAsArrayBuffer(file)：读取为二进制数据，适用于处理二进制文件。

注意事项：

  • 仅支持用户主动选择的文件（通过 uni.chooseFile 获取）。
  • 读取大文件时注意性能，建议分片处理。
  • 部分平台（如小程序）对 Base64 长度有限制，需压缩或分块上传。

通过以上方法，可灵活实现文件读取功能。如有进一步需求，请参考 UniApp 官方文档。

回到顶部