快速入门
复制包含安装步骤和该插件完整 Markdown 指南的配置 prompt。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-file-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/file-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
安装
“安装”章节你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins然后使用以下 prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-file-picker` plugin in my project.如果你更想手动设置,请运行以下命令安装插件,并按照下方各平台的说明操作:
npm install @capgo/capacitor-file-pickernpx cap sync导入
“导入”章节import { CapgoFilePicker } from '@capgo/capacitor-file-picker';快速入门
章节标题为“快速入门”import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickFiles({ types: ['application/pdf', 'image/*'], limit: 5, readData: false});console.log('Picked files:', result.files);示例:pickImages
“示例:pickImages”章节import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);示例:pickVideos
“示例:pickVideos”章节import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({ limit: 3, skipTranscoding: true});console.log('Picked videos:', result.files);常见坑点
章节标题为“常见陷阱”- 权限: 调用
checkPermissions()然后requestPermissions()在需要时。 - 监听器: 在页面卸载时移除句柄。
- 唯一可信来源:信任
src/definitions.ts在 GitHub 仓库中。
API 概览
章节标题:“API 概览”pickFiles
“pickFiles” 部分从设备中选择一个或多个文件。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickFiles({ types: ['application/pdf', 'image/*'], limit: 5, readData: false});console.log('Picked files:', result.files);pickImages
“pickImages” 部分从图库中选择一个或多个图片。 仅支持 Android/iOS。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickImages({ limit: 10, readData: false});console.log('Picked images:', result.files);pickVideos
“pickVideos” 章节从相册中选择一个或多个视频。 仅限 Android/iOS。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickVideos({ limit: 3, skipTranscoding: true});console.log('Picked videos:', result.files);pickMedia
“pickMedia” 章节从相册中选择一个或多个图片或视频。 仅限 Android/iOS。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickMedia({ limit: 5, readData: true});console.log('Picked media:', result.files);pickDirectory
“pickDirectory” 章节从设备中选择一个目录。 仅限 Android/iOS。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();console.log('Selected directory:', result.path);convertHeicToJpeg
“convertHeicToJpeg” 章节将 HEIC 图片转换为 JPEG 格式。 仅限 iOS。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.convertHeicToJpeg({ path: '/path/to/image.heic', quality: 0.9});console.log('Converted file:', result.path);copyFile
标题为“copyFile”的章节将文件复制到新位置。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
await CapgoFilePicker.copyFile({ from: '/source/file.pdf', to: '/destination/file.pdf', overwrite: true});checkPermissions
“checkPermissions” 章节检查读取文件的权限。 仅限 Android。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.checkPermissions();console.log('Read permission:', status.readExternalStorage);requestPermissions
“requestPermissions” 章节请求读取文件的权限。 仅限 Android。
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const status = await CapgoFilePicker.requestPermissions();if (status.readExternalStorage === 'granted') { console.log('Permission granted');}类型参考
“类型参考” 章节PickFilesOptions
标题为“PickFilesOptions”的章节选择文件的选项。
export interface PickFilesOptions { /** * List of accepted MIME types or file extensions. * On iOS, only MIME types are supported. * Examples: ['image/*'], ['application/pdf'], ['.pdf', '.doc'] */ types?: string[]; /** * Maximum number of files to pick. * Set to 0 for unlimited (platform default). * @default 0 */ limit?: number; /** * Whether to read the file data as base64. * Note: Reading large files may cause memory issues. * @default false */ readData?: boolean;}PickFilesResult
标题为“PickFilesResult”的章节选择文件的结果。
export interface PickFilesResult { /** Array of picked files */ files: PickedFile[];}PickMediaOptions
标题为“PickMediaOptions”的章节选择媒体(图片/视频)的选项。
export interface PickMediaOptions { /** * Maximum number of files to pick. * Set to 0 for unlimited (platform default). * @default 0 */ limit?: number; /** * Whether to read the file data as base64. * Note: Reading large files may cause memory issues. * @default false */ readData?: boolean; /** * iOS only: Skip transcoding of videos. * @default false */ skipTranscoding?: boolean; /** * iOS 15+ only: Show ordered selection badges. * @default false */ ordered?: boolean;}PickDirectoryResult
标题为“PickDirectoryResult”的章节选择目录的结果。
export interface PickDirectoryResult { /** The path to the selected directory */ path: string;}ConvertHeicToJpegOptions
“ConvertHeicToJpegOptions” 章节将 HEIC 转换为 JPEG 的配置选项。
export interface ConvertHeicToJpegOptions { /** The path to the HEIC file to convert */ path: string; /** * The compression quality for JPEG (0.0 - 1.0). * @default 0.9 */ quality?: number;}ConvertHeicToJpegResult
“ConvertHeicToJpegResult” 章节HEIC 转 JPEG 的转换结果。
export interface ConvertHeicToJpegResult { /** The path to the converted JPEG file */ path: string;}CopyFileOptions
“CopyFileOptions” 章节复制文件的配置选项。
export interface CopyFileOptions { /** Source file path */ from: string; /** Destination file path */ to: string; /** * Whether to overwrite if destination exists. * @default false */ overwrite?: boolean;}PermissionStatus
标题为“PermissionStatus”的章节文件访问权限状态。
export interface PermissionStatus { /** Whether permission to read media files is granted */ readExternalStorage: PermissionState; /** Whether permission to access media location is granted */ accessMediaLocation?: PermissionState;}PickerDismissedListener
“PickerDismissedListener” 章节选择器关闭事件的监听回调。
export type PickerDismissedListener = (event: null) => void;PickedFile
“PickedFile” 章节表示已选择的文件。
export interface PickedFile { /** The name of the file */ name: string; /** The path to the file */ path?: string; /** The MIME type of the file */ mimeType: string; /** The size of the file in bytes */ size: number; /** * The base64 encoded data of the file. * Only present if readData was true. */ data?: string; /** * The Blob instance of the file. * Web only. */ blob?: Blob; /** Width in pixels (images/videos only) */ width?: number; /** Height in pixels (images/videos only) */ height?: number; /** Duration in seconds (videos only) */ duration?: number; /** Last modified timestamp in milliseconds */ modifiedAt?: number;}PermissionState
“PermissionState” 章节权限状态值。
export type PermissionState = 'prompt' | 'prompt-with-rationale' | 'granted' | 'denied';单一事实来源
标题为“单一事实来源”的部分本页面由插件的 src/definitions.ts生成。当上游的公共 API 发生变化时,请重新运行 sync。
从入门指南继续
“从入门指南继续”章节如果你正在使用 快速入门 要规划存储和文件处理,请将其与 使用 @capgo/capacitor-file-picker 关于使用 @capgo/capacitor-file-picker 时的原生能力, @capgo/capacitor-data-storage-sqlite 关于 @capgo/capacitor-data-storage-sqlite 中的实现细节, 使用 @capgo/capacitor-data-storage-sqlite 关于使用 @capgo/capacitor-data-storage-sqlite 的原生能力, @capgo/capacitor-file 实现细节请参阅 @capgo/capacitor-file,以及 使用 @capgo/capacitor-file 在 @capgo/capacitor-file. 中使用原生能力