@angelengineering/filepicker

Nativescript 文件选择

此文件选择插件导出 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()。

内容

Nativescript 文件选择器

安装

npm install @angelengineering/filepicker --save

或者

ns plugin install @angelengineering/filepicker

用法

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

导入插件。

import { Filepicker, MediaType } from '@angelengineering/filepicker';

创建文件选择器实例。

let picker = new Filepicker();

确定要包含哪些类型的文件，以及是否允许单选或多选，然后调用文件选择器。

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 版本和设备 API 版本。

如果针对 API 25-33，请确保在您的应用程序中声明了遗留存储权限，通过在 AndroidManifest.xml 中添加以下行来实现。

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

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

注意：当针对 API 34+ 时，在 API 26-32 运行的设备上，遗留权限已被弃用，但对于 API <26 的设备仍需要用户授权。

在打开选择器之前请求遗留权限，请使用以下代码

request('storage');

为了支持 API 33+ 设备，您还需要在 AndroidManifest 中添加以下内容并请求新权限

<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');

有关工作权限示例，请参阅演示应用程序中 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原生的文件选择器也支持从这些应用中选择文件。您设备上安装的其他文档提供者应用也可能提供额外服务。

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

iOS

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

已在iOS 12.0-17.2上测试并通过。

其他实用工具

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

致谢

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

许可证

Apache License Version 2.0