如何在Angular+Ionic+Capacitor JS的iOS项目中打开文件选择对话框？

要实现你需要的iOS原生样式文件选择对话框，直接用Capacitor官方的@capacitor/document-picker插件即可，它会调用iOS系统自带的UIDocumentPickerViewController，和你预览图的样式完全一致。

步骤1：安装插件 #

执行以下命令安装并同步到iOS项目：

npm install @capacitor/document-picker
npx cap sync ios

步骤2：配置iOS权限 #

打开iOS项目的Info.plist文件，添加以下权限描述（否则App会因权限问题崩溃）：

<key>NSDocumentPickerUsageDescription</key>
<string>需要访问文件以选择并上传</string>

将描述文本替换为符合你业务场景的内容。

步骤3：在Angular组件中调用 #

在组件类中导入插件并实现选择逻辑：

import { Component } from '@angular/core';
import { DocumentPicker } from '@capacitor/document-picker';

@Component({
  selector: 'app-file-picker',
  templateUrl: './file-picker.component.html',
  styleUrls: ['./file-picker.component.scss'],
})
export class FilePickerComponent {
  async openFilePicker() {
    try {
      const result = await DocumentPicker.pickDocuments({
        // 可选：限制选择的文件类型，比如只允许图片、PDF等
        types: ['public.image', 'public.pdf'],
        // 可选：是否允许多选
        multiple: false,
      });

      // 处理选中的文件
      console.log('选中的文件:', result.files);
      result.files.forEach(file => {
        console.log('文件名:', file.name);
        console.log('文件路径:', file.path);
        console.log('文件MIME类型:', file.mimeType);
      });
    } catch (error) {
      // 用户取消选择或发生错误时的处理
      console.error('文件选择失败:', error);
    }
  }
}

步骤4：添加触发按钮 #

在组件HTML模板中添加触发选择的按钮：

<ion-button (click)="openFilePicker()">选择文件</ion-button>

点击按钮后，就会弹出iOS原生的文件选择对话框，完全匹配你需要的样式。

内容的提问来源于stack exchange，提问作者user20271243