Ionic 3中FileChooser组件的多文件选择可行性问询

你好呀～首先明确说：Ionic 3里常用的FileChooser插件（对应cordova-plugin-filechooser）确实不支持多选文件，它只能单次选择单个文件。不过别担心，我们可以用其他插件来实现多文件选择的需求，下面给你具体的实现方案：

推荐方案：使用DocumentPicker插件 #

这个插件是Ionic Native支持的，适配Ionic 3，而且能稳定实现多文件选择：

1. 安装插件和Native包装 #

首先在项目根目录执行命令安装Cordova插件：

cordova plugin add cordova-plugin-document-picker --save

然后安装Ionic 3对应的Native包（因为Ionic 3对应Native 4.x版本，所以要指定版本）：

npm install @ionic-native/document-picker@4 --save

2. 配置AppModule #

打开src/app/app.module.ts，导入DocumentPicker并添加到providers数组中：

import { DocumentPicker } from '@ionic-native/document-picker';

@NgModule({
  declarations: [/* 你的页面组件 */],
  imports: [/* 导入的模块 */],
  providers: [
    // ...其他providers
    DocumentPicker
  ]
})
export class AppModule {}

3. 在页面中调用多文件选择 #

在你需要使用的页面组件里，注入DocumentPicker，然后调用pickMultiple()方法：

import { DocumentPicker } from '@ionic-native/document-picker';
import { ToastController } from 'ionic-angular';

constructor(
  private documentPicker: DocumentPicker,
  private toastCtrl: ToastController
) {}

selectMultipleFiles() {
  // 允许选择所有类型的文件，也可以指定比如'image/*'只选图片
  this.documentPicker.pickMultiple({ type: '*/*' })
    .then((fileUris: string[]) => {
      if (fileUris.length > 0) {
        const toast = this.toastCtrl.create({
          message: `成功选中${fileUris.length}个文件`,
          duration: 2000
        });
        toast.present();
        // 这里可以处理选中的文件URI，比如上传或者本地读取
        console.log('选中的文件URI列表:', fileUris);
      }
    })
    .catch(error => {
      console.error('文件选择失败:', error);
      const toast = this.toastCtrl.create({
        message: '文件选择出错，请重试',
        duration: 2000
      });
      toast.present();
    });
}

其他可选插件 #

还有一个cordova-plugin-filepicker也能实现多选，但它的维护状态不如DocumentPicker，所以更推荐前者。

⚠️ 注意：这些都是Cordova插件，只能在真机或模拟器上运行，浏览器环境下无法测试哦～

内容的提问来源于stack exchange，提问作者Salman Ullah Khan