가이드
Capacitor에서 File Picker 사용 방법
@capgo/capacitor-file-picker 사용하기
파일, 이미지, 비디오, 디렉토리를 선택하기 위한 Capacitor File Picker 플러그인 인터페이스.
설치
bun add @capgo/capacitor-file-picker
bunx cap sync
bunx cap sync 플러그인의 네이티브 code를 네이티브 프로젝트에 복사합니다. 플러그인을 업그레이드할 때마다 다시 실행하세요.
가져오기
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
API 한눈에 보기
| 메서드 | 설명 |
|---|---|
pickFiles |
기기에서 파일을 하나 이상 선택하세요. |
pickImages |
갤러리에서 이미지를 하나 이상 선택하세요. Android/iOS 전용. |
pickVideos |
갤러리에서 동영상을 하나 이상 선택하세요. Android/iOS 전용. |
pickMedia |
갤러리에서 이미지 또는 동영상을 하나 이상 선택하세요. Android/iOS 전용. |
pickDirectory |
기기에서 디렉터리를 선택하세요. Android/iOS 전용. |
convertHeicToJpeg |
HEIC 이미지를 JPEG 형식으로 변환하세요. iOS 전용. |
copyFile |
파일을 새 위치로 복사합니다. |
checkPermissions |
광범위한 저장소 또는 미디어 권한 상태를 확인하세요. picker만 사용하는 플로우는 pickFiles(), pickImages(), pickVideos(), 또는 pickMedia() Android 13+에서 이 권한을 요구해서는 안 됩니다. Android 전용. |
requestPermissions |
광범위한 저장소 또는 미디어 권한을 요청하세요. picker API만 사용하려는 목적으로 READ_MEDIA_IMAGES 또는 READ_MEDIA_VIDEO 권한을 요청하거나 선언하지 마세요. Google Play는 picker 대안이 앱의 핵심 기능에 충분하지 않은 경우에만 이러한 권한을 허용합니다. 대신 @capgo/capacitor-file-picker 사용자가 선택한 파일, 이미지 또는 동영상에 접근할 때는 picker 메서드를 사용하세요. Android 전용. |
예시
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()
갤러리에서 이미지를 하나 이상 선택하세요. 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()
갤러리에서 동영상을 하나 이상 선택하세요. 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()
갤러리에서 이미지 또는 동영상을 하나 이상 선택하세요. 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()
기기에서 디렉터리를 선택하세요. Android/iOS 전용.
import { CapgoFilePicker } from '@capgo/capacitor-file-picker';
const result = await CapgoFilePicker.pickDirectory();
console.log('Selected directory:', result.path);
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);
위 테이블에는 9개의 핵심 메서드가 나열되어 있습니다. Listener 및 버전 헬퍼, 그리고 각 메서드의 전체 계약(contract)에 대한 상세 내용은 GitHub 리포지토리.
이벤트 수신
addListener 핸들을 반환합니다. 호출하세요 handle.remove() 화면이 언마운트될 때, 또는 CapgoFilePicker.removeAllListeners() 모든 리스너를 해제하려면.
전체 레퍼런스
@capgo/capacitor-file-picker 사용하기 단계부터 계속 진행하세요
사용 중이라면 @capgo/capacitor-file-picker 사용하기 저장 공간과 파일 처리를 계획하려면, 다음 항목과 연결하세요 @capgo/capacitor-file-picker @capgo/capacitor-file-picker의 구현 세부 사항은 다음과 같습니다, 시작하기 Getting Started의 구현 상세 내용은 @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.의 구현 세부 사항은