Ionic 3文件选择插件异常：无法获取文件URI求助

Hey there, let's work through this file URI issue with your Ionic 3 setup! I've dealt with similar plugin quirks in this exact version stack, so here's a step-by-step breakdown to get you the file URI you need:

1. First: Fix Error Handling & Debug Basics #

Your original code is missing a catch block, which is why you're not seeing any console errors when things go wrong. Let's add that first to uncover hidden issues:

this.fileChooser.open()
  .then(uri => {
    console.log('File URI:', uri);
  })
  .catch(error => {
    console.error('File chooser failed with error:', error);
  });

Run this again—you’ll likely get a concrete error message to work with now.

2. Verify Plugin & Native Wrapper Compatibility #

Ionic 3 relies on @ionic-native v4.x wrappers, and Cordova 8.0.0 has strict plugin compatibility rules. Let's make sure everything is aligned:

• Check your installed plugins:

  cordova plugin list
  

• If cordova-plugin-filechooser is outdated, uninstall and reinstall a compatible version:

  cordova plugin rm cordova-plugin-filechooser
  cordova plugin add cordova-plugin-filechooser@latest
  

• Update the Ionic Native wrapper to match Ionic 3:

  npm uninstall @ionic-native/file-chooser
  npm install @ionic-native/file-chooser@4.20.0 --save
  

3. Fix Platform Permissions #

Missing permissions are the #1 culprit for silent failures here:

Android #

Add these permissions to your config.xml:

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

For Android 6+, you need to request permissions dynamically. Add this to your page code:

import { AndroidPermissions } from '@ionic-native/android-permissions';

constructor(private androidPermissions: AndroidPermissions, private fileChooser: FileChooser) {}

async openFileChooserSafely() {
  const permissionResult = await this.androidPermissions.requestPermissions([
    this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE,
    this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
  ]);

  if (permissionResult.hasPermission) {
    // Proceed only if permissions are granted
    this.fileChooser.open()
      .then(uri => console.log('File URI:', uri))
      .catch(err => console.error('Error:', err));
  } else {
    console.error('Permissions denied—can’t access files');
  }
}

Don’t forget to add AndroidPermissions to your app.module.ts providers.

iOS #

Add a privacy description to config.xml (required for iOS 10+):

<platform name="ios">
    <config-file parent="NSPhotoLibraryUsageDescription" platform="ios" target="*-Info.plist">
        <string>We need access to your files to upload and process them</string>
    </config-file>
</platform>

4. Resolve Content URIs to Real File Paths #

On Android, fileChooser often returns a content:// URI instead of a direct file path. Use cordova-plugin-filepath to convert it:

1. Install the plugin and wrapper:

   cordova plugin add cordova-plugin-filepath
   npm install @ionic-native/file-path@4.20.0 --save
   

2. Update your code to resolve the URI:

   import { FileChooser } from '@ionic-native/file-chooser';
   import { FilePath } from '@ionic-native/file-path';
   
   constructor(private fileChooser: FileChooser, private filePath: FilePath) {}
   
   async getFileUri() {
     try {
       const rawUri = await this.fileChooser.open();
       console.log('Raw URI:', rawUri);
       const realPath = await this.filePath.resolveNativePath(rawUri);
       console.log('Real file path:', realPath);
     } catch (err) {
       console.error('Error:', err);
     }
   }
   

5. Alternative Plugin (If FileChooser Still Fails) #

If cordova-plugin-filechooser continues to misbehave, switch to the more reliable cordova-plugin-document-picker:

1. Install it:

   cordova plugin add cordova-plugin-document-picker
   npm install @ionic-native/document-picker@4.20.0 --save
   

2. Use it like this:

   import { DocumentPicker } from '@ionic-native/document-picker';
   
   constructor(private documentPicker: DocumentPicker) {}
   
   async pickFile() {
     try {
       const selectedFile = await this.documentPicker.pick({
         type: ['public.all'] // Adjust to your file types (e.g., 'public.image')
       });
       console.log('File URI:', selectedFile.uri);
       console.log('File details:', selectedFile);
     } catch (err) {
       console.error('Picker error:', err);
     }
   }
   

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