使用 HarmonyOS 文件选择器实现文件管理功能

使用 HarmonyOS 文件选择器实现文件管理功能

在 HarmonyOS 开发中，文件管理是一个常见的功能场景，例如让用户选择文件并进行相关操作。本文将通过封装文件选择器的方式，展示如何利用 HarmonyOS 提供的能力实现文件选择，并以模块化的方式提高代码复用性和可维护性。

---

功能实现概览

我们将实现以下目标：

1. 封装文件选择器功能模块，使其独立于具体的页面逻辑。
2. 提供模块化入口，方便页面调用文件选择功能。
3. 在页面中调用封装模块，实现文件选择及后续操作。

---

模块封装

1. 文件选择器核心功能实现

创建 file-picker.ts 文件，用于封装文件选择器的核心功能。以下是代码实现：

import picker from '@ohos.file.picker';
import common from '@ohos.app.ability.common';

/**
 * 打开文件选择器以选择文件
 * @param context 当前 UIAbilityContext
 * @returns Promise<string> 文件路径
 */
export async function selectFile(context: common.UIAbilityContext): Promise<string> {
  if (!context) {
    throw new Error('无法获取上下文');
  }

  try {
    // 创建文件选择器实例
    const documentPicker = new picker.DocumentViewPicker();
    const result = await documentPicker.select();

    if (result && result.length > 0) {
      const originalPath = result[0];
      console.info('文件选择成功:', originalPath);

      // 安全解析文件路径
      const filePath = originalPath.startsWith('file://') ? originalPath.replace('file://', '') : originalPath;
      console.info('解析后的文件路径:', filePath);

      return filePath;
    }

    throw new Error('未选择任何文件');
  } catch (error) {
    console.error('文件选择失败:', error);
    throw new Error(`文件选择失败: ${error instanceof Error ? error.message : String(error)}`);
  }
}

2. 模块入口封装

创建 index.ts 文件作为模块的统一入口，提供对外导出的功能：

import { fromPromise } from '../../universalify';
import { selectFile } from './file-picker';

export default {
  selectFile: fromPromise(selectFile),
};

此文件封装了文件选择器的导出逻辑，便于其他页面直接调用。

---

页面调用示例

在页面中，我们可以通过调用 FilePicker 模块实现文件选择功能。例如：

页面代码实现

import FilePicker from '../modules/file-picker';
import common from '@ohos.app.ability.common';

@Entry
@Component
export default struct HomePage {
  @State loadStatus: string = '未加载文件'; // 显示加载状态

  async handleFileSelection(context: common.UIAbilityContext) {
    try {
      // 调用文件选择功能
      const filePath = await FilePicker.selectFile(context);
      if (!filePath) {
        this.loadStatus = '未选择任何文件';
        return;
      }

      console.info('用户选择的文件路径:', filePath);
      this.loadStatus = `文件加载成功：${filePath}`;
    } catch (error) {
      this.loadStatus = `文件加载失败: ${error instanceof Error ? error.message : '未知错误'}`;
    }
  }

  build() {
    Column() {
      Text('选择文件')
        .fontSize(20)
        .margin({ bottom: 20 });

      Button('打开文件选择器')
        .onClick(async () => {
          const context = getContext(this) as common.UIAbilityContext; // 获取上下文
          if (!context) {
            this.loadStatus = '无法获取上下文';
            return;
          }

          await this.handleFileSelection(context); // 调用文件选择功能
        })
        .margin({ bottom: 20 });

      Text(this.loadStatus)
        .fontSize(18)
        .fontColor(Color.Blue);
    }
  }
}

---

完整调用流程

1. 用户在页面中点击按钮，调用文件选择功能。
2. 通过 FilePicker 模块打开文件选择器，返回用户选择的文件路径。
3. 页面中根据返回的路径，更新状态或执行进一步操作。

---

优点

模块化设计

• 解耦逻辑：文件选择功能与页面逻辑分离，提高代码复用性。
• 易扩展：未来如需修改文件选择逻辑，仅需调整 file-picker.ts 文件即可。

清晰调用

• 通过 index.ts 提供统一入口，调用方式直观易懂。

类型安全

• 代码中明确类型声明，符合 ArkTS 类型检查规则，避免潜在错误。

---

总结

通过本文的实现，我们成功将文件选择功能模块化，并演示了如何在页面中调用。这样的设计不仅提升了代码复用性，还为后续功能扩展奠定了良好的基础。

希望这篇文章能对您在 HarmonyOS 开发中的文件管理功能实现提供帮助。如果有任何问题或更好的建议，欢迎留言讨论！