Ionic 3中Base64插件无法使用，提示plugin_not_installed求助

Hey there, let's work through that frustrating 'plugin_not_installed' error you're hitting when trying to convert an image to Base64 in your Ionic 3 project. This is a common hiccup with Cordova plugins, and we can sort it out with a few key checks and fixes:

1. Ensure the Base64 Plugin is Properly Installed #

First, let's rule out a botched plugin installation—sometimes plugins fail to set up correctly on the first try. Do a clean reinstall using these commands:

# Uninstall the existing plugin first
ionic cordova plugin remove cordova-plugin-base64

# Reinstall the Cordova plugin
ionic cordova plugin add cordova-plugin-base64

# Install the Ionic Native wrapper for the plugin
npm install @ionic-native/base64

2. Register the Plugin in Your AppModule #

Ionic Native requires plugins to be added to your app's main module for dependency injection to work. Open src/app/app.module.ts and update it like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Base64 } from '@ionic-native/base64'; // Import the plugin
import { MyApp } from './app.component';

@NgModule({
  declarations: [MyApp],
  imports: [BrowserModule],
  bootstrap: [MyApp],
  providers: [
    Base64, // Add this to your providers array
    // ... other existing providers like StatusBar, SplashScreen
  ]
})
export class AppModule {}

3. Test on a Cordova-Compatible Environment #

Cordova plugins don't work in the standard ionic serve browser environment—they need to run on a mobile device, simulator, or the Cordova browser platform. If you're testing via ionic serve, you'll always get this error. Instead, run your app using:

# For Android devices/simulators
ionic cordova run android

# For iOS devices/simulators
ionic cordova run ios

If you need browser testing, add the Cordova browser platform first:

ionic cordova platform add browser
ionic cordova run browser

4. Fix Your File Path Issue #

Looking at your code, you're using a Windows local file path (C:\Users\Antonio\...)—this won't work on a mobile device! That path points to your computer's filesystem, not the device's storage.

If you're getting the avatar from a camera/photo library, use the device-local path returned by plugins like the Camera plugin (usually starts with file:///). Here's a corrected code example:

convertToBase64() {
  // Replace this with the actual device file path from your avatar source
  const deviceImagePath = 'file:///storage/emulated/0/Android/data/com.yourapp/files/avatar.jpg';

  this.base64.encodeFile(deviceImagePath).then((base64File: string) => {
    this.base64Img = this.sanitizer.bypassSecurityTrustUrl(base64File);
    // Now you can save this Base64 string or path to your database
  }, (err) => {
    console.error('Conversion error:', err);
  });
}

If your avatar is a remote URL, you'll need to first download the file to the device's local storage (using the File plugin) before converting it to Base64.

Quick Recap #

• Reinstall the plugin and its wrapper to fix installation glitches
• Register the plugin in AppModule for proper dependency injection
• Test on a Cordova-compatible environment (device/simulator/browser platform)
• Use a valid device file path instead of your computer's local path

That should squash the 'plugin_not_installed' error and let you convert your images to Base64 smoothly!

内容的提问来源于stack exchange，提问作者Antonio Posada Magdaleno