Marketplace
作者 NativeScript.org
@voicethread/nativescript-filepicker
由 voicethread 提供 | v1.0.2
Nativescript 应用程序的文件选择插件
npm i --save @voicethread/nativescript-filepicker

NativeScript Filepicker apple android

npm

@voicethread/nativescript-filepicker

此文件选择插件导出 filePicker() 函数，支持单选和多选（对于 iOS，多选功能取决于操作系统版本），仅使用原生选择方法。

对于 iOS，filePicker() 使用 UIDocumentPicker 允许从可通过 iOS 文件应用程序访问的公共文件中进行选择。在从文件中选择时，UIDocumentPicker 支持多选。

iOS 还可以访问 galleryPicker() 函数，该函数从 iOS 照片库中进行选择。此选择器使用 iOS 13 及以下版本的 UIImagePicker，仅支持单选。iOS 14+ 使用 PHPicker，它支持从照片库中进行多选。此选择器需要在 iOS 上允许访问媒体之前需要用户权限。

对于 Android，filePicker() 使用 Intents 打开内置文件选择器。对于 Android 6（API 23）及以上版本，应在 AndroidManifest 中明确要求读取文件存储权限。请参阅演示以获取实现细节。注意：galleryPicker() 将仅调用 filePicker()。

https://github.com/VoiceThread/nativescript-plugins/assets/20136906/ba6dcba1-bfd6-4a9d-a02e-f5351c252cdb

内容

安装

npm install @voicethread/nativescript-filepicker --save

或者

ns plugin install @voicethread/nativescript-filepicker

使用

了解如何使用此插件的最佳方式是查看此存储库中包含的演示应用程序。在 apps/demo 文件夹中，您可以找到 TypeScript 非Angular 应用程序中插件的用法。请参阅 apps/demo/src/plugin-demos/filepicker.ts。

  1. 导入插件。
import { Filepicker, MediaType } from '@voicethread/nativescript-filepicker';
  1. 创建文件选择器实例。
let picker = new Filepicker();
  1. 确定要包含哪种类型的文件，以及是否允许单选或多选，然后调用文件选择器。
try {
  pickedFiles = await picker.filePicker(MediaType.IMAGE + MediaType.VIDEO + MediaType.AUDIO, true);
} catch (err) {
  if (err) alert(err?.message);
} finally {
  this.handleFiles(pickedFiles);
}

Android 权限

在演示应用程序中请求权限，我们使用 @nativescript-community perms 插件。虽然这并非所有操作系统版本及其系统选择器所必需，但为了安全起见，您应该请求它，让用户知道。

请确保在针对 API 26+ 时，在 AndroidManifest.xml 中添加以下行以添加权限。

<manifest ... >
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

  <application android:requestLegacyExternalStorage="true" ... >
    ...
  </application>
</manifest>

对于 API 33+，您还需要在 Android Manifest 中添加以下内容以及请求其他权限。

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

在 API 33+ 上启动选择器之前，您需要请求以下权限以允许选择器访问所有文件类型。

request('photo');
request('video');
request('audio');

例如，请参阅 dmeo 应用程序中 filepicker.ts 文件内的 pickAll 函数。

iOS 权限

使用iOS插件中的galleryPicker()从照片库中选择需要用户首先授予照片库权限，以便访问所选图片，否则将不返回任何文件。如果您的应用未提供关于为何需要此权限的描述，可能会被苹果应用商店拒绝。默认信息“需要访问照片库”可能不足以满足应用商店审查员的要求。您可以通过编辑应用中的app/App_Resources/iOS/Info.plist文件来自定义它，并添加以下键。

<key>NSPhotoLibraryUsageDescription</key>
<string>Requires access to photo library to upload media.</string>

注意：如果您在生产应用中使用perms插件，请首先阅读其README.md，因为在使用此插件的生产应用中，您需要添加所有iOS Info.plist权限字符串，以避免因插件包含所有权限类型的代码而被自动处理拒绝。

支持的文件选择器文件类型

MediaType {
  IMAGE,
  AUDIO,
  VIDEO,
  ARCHIVE,
  DOCUMENT,
  ALL     =>   (IMAGE | AUDIO | VIDEO | ARCHIVE | DOCUMENT )
}

每个平台都原生支持不同的文件/mime类型，您可以通过查看每个平台的插件包源来查看插件使用的类型。

Android

如果您的Android设备上已登录Google Photos和Google Drive账户，Android系统自带的文件选择器也支持从Google Photos和Google Drive中选择文件。您设备上安装的其他文档提供程序应用也可能提供额外服务。

在Android API 25-33上测试并通过。

iOS

iOS选择器也支持从已登录设备的关联iCloud账户中选择文件。请注意，对于生产应用，您需要将iCloud功能添加到iOS应用中，并通过苹果开发者网站为该包id注册该权限。之后，根据演示应用中的Info.plist更新相关键。

在iOS 12.x-16.x上测试并通过。

其他实用工具

此插件还导出了一个名为getFreeMBs的函数，开发者可以使用该函数检查当前设备/应用的缓存文件夹的可用空间，这是所选文件被复制到的地方。当处理较大视频文件时，这很有用，可以确保在挑选/复制视频文件用于应用之前有足够的空间。

致谢

此插件基于nativescript-mediafilepicker和ui-document-picker的代码。

许可

Apache License Version 2.0