我使用图像选择器从图库中选择多个图像，但我得到“Plugin_not_installed”
我使用从链接安装插件离子图像选择器
ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker
在我的 package.json 中安装 cordova 插件和 telerik 图像选择器后：
{
"name": "sheedo",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/camera": "^5.14.0",
"@ionic-native/core": "^5.14.0",
"@ionic-native/file": "^5.14.0",
"@ionic-native/image-picker": "^5.14.0",
"@ionic-native/screen-orientation": "^5.14.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"cordova-android": "8.1.0",
"cordova-ios": "^5.0.1",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-telerik-imagepicker": "^2.3.3",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"ionic4-hidenav": "^0.1.2",
"jalali-moment": "^3.3.3",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "~2.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-telerik-imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
}
},
"platforms": [
"ios"
]
}
}
并使用图像选择器
let options: ImagePickerOptions = {
maximumImagesCount: 8
};`enter code here`
if( !this.imagePicker.hasReadPermission) this.imagePicker.requestReadPermission();
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, (err) => {alert(err) });
并且要运行，请使用 ionicserve --devapp
当单击 getImage 时，我使用警报来获取错误
"Plugin_not_installed"
在 vsCode 控制台中
`[ng] [console.warn]: "Native: tried calling ImagePicker.getPictures, but the ImagePicker plugin is not installed."
[ng] [console.warn]: "Install the ImagePicker plugin: 'ionic cordova plugin add cordova-plugin-telerik-imagepicker'"`
网上所有的例子都是这样做的
我也测试命令
npm install @ionic-native/image-picker@4
用于安装版本 4，但应用程序未构建。
我的 ionic 版本是 4，我运行 android 平台
可以使用
https://ionicframework.com/docs/native/image-picker
ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker
* `cordova plugin add cordova-android-support-gradle-release`
* `ioinc cordova platform rm android`
* `ionic cordova platform add android`
* `ionic cordova build android --prod`
import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker/ngx';
constructor(private imagePicker: ImagePicker) { }
getPictures() {
let options: ImagePickerOptions = {
//here Quality of images, defaults to 100
quality: 100,
//here Width of an Image
width: 600,
//here Height of an Image
height: 600,
/** Output type, defaults to 0 (FILE_URI).
* FILE_URI :0 (number) it returns a actual path for an image
*/
outputType: 1
//here Maximum image count for selection, defaults to 15.
//while setting a number 15 we can load 15 images in one selection.
maximumImagesCount: 8
// max images to be selected, defaults to 15. If this is set to 1
};
this.imagePicker.getPictures(options)
.then(selectedImg => { })
}
尝试以非本机方式使用该插件。 在您的组件中声明一个窗口变量，然后使用它来调用插件。您需要从设备上测试它，它不适用于浏览器，也不适用于 --devapp 服务。它会正常工作，但它不接受选项对象...我需要它返回base64（outputType：1），但总是返回fileURI
/*Imports section*/
declare const window: any;
@Component({...})
export class HomePage implements OnInit {
constructor(){}
yourMethod() {
window.imagePicker.getPictures(
async function(results) {
for (var i = 0; i < results.length; i++) {
const currentPicture = results[i];
files.push(currentPicture);
}
console.log(files);
}, function (error) {
console.log('Error: ' + error);
},
{
outputType: 1,
maximumImagesCount: 30,
quality: 100
}
);
}
}
你尝试使用，这对我有用
https://github.com/capawesome-team/capacitor-file-picker
const pickFiles = async () => {
const result = await FilePicker.pickFiles({
types: ['image/png'],
multiple: true,
});
};