堆栈内存溢出
  简体   繁体   English

Cordova插件无法正常工作

[英]Cordova Plugin not working

 原文  2017-04-23 16:52:44  9   1    cordova/ angular/ typescript/ ionic2/ cordova-plugins

问题描述

I'm trying to use the Cordova plugin: cordova-plugin-filepath 我正在尝试使用Cordova插件： cordova-plugin-filepath

https://www.npmjs.com/package/cordova-plugin-filepath https://www.npmjs.com/package/cordova-plugin-filepath

on an Corodva / Ionic ( Android ) application. 在Corodva / Ionic （ Android ）应用程序上。

I'm trying to use it with the same code as on the above url, I mean: 我正在尝试使用与上面的URL相同的代码，我的意思是： 

window.FilePath.resolveNativePath('content://...', successCallback, errorCallback);

But I get: 但我得到： 

  [11:36:22]  typescript: D:/ionic2/test-app/src/pages/home/home.ts, line: 27
        Property 'FilePath' does not exist on type 'Window'.

  L26:  this._camera.getPicture( options ).then(( imageData ) => {
  L27:      this.cameraUrl = window.FilePath.resolveNativePath(imageData);
  L28:      this.photoSelected = true;

Do I have to import window somehow? 我必须以某种方式导入window吗？

I'm using this plugin to convert the path of a file from: 我正在使用此插件转换文件的路径： 

content://com.android.providers.media.documents/document/...

to: 至： 

/storage/sdcard/...

This is my environment information: 这是我的环境信息： 

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed

Just in case, here I drop the code for: home.ts : 为了以防万一，在这里我删除代码： home.ts ： 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';
import { Camera } from '@ionic-native/camera';

@Component( {
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    cameraData: string;
    photoTaken: boolean;
    cameraUrl: string;
    photoSelected: boolean;

    constructor( public navCtrl: NavController, private _DomSanitizationService: DomSanitizer, private _camera: Camera ) {
        this.photoTaken = false;
    }

    selectFromGallery() {
        var options = {
            sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
            destinationType: this._camera.DestinationType.NATIVE_URI
        };
        this._camera.getPicture( options ).then(( imageData ) => {
            this.cameraUrl = window.FilePath.resolveNativePath(imageData);
            this.photoSelected = true;
            this.photoTaken = false;
        }, ( err ) => {
            // Handle error
        });
    }

    openCamera() {
        var options = {
            sourceType: this._camera.PictureSourceType.CAMERA,
            destinationType: this._camera.DestinationType.DATA_URL,
            correctOrientation: true
        };
        this._camera.getPicture( options ).then(( imageData ) => {
            this.cameraData = 'data:image/jpeg;base64,' + imageData;
            this.photoTaken = true;
            this.photoSelected = false;
        }, ( err ) => {
            // Handle error
        });
    }

}

Any idea on how to make this plugin work? 有关如何使这个插件工作的任何想法？

[EDIT 1] [编辑1]

I modified the source code in the following way: 我用以下方式修改了源代码： 

import { FilePath } from '@ionic-native/file-path';
...
constructor(
        public navCtrl: NavController,
        private _DomSanitizationService: DomSanitizer,
        private _camera: Camera,
        private filePath: FilePath
) {
    this.photoTaken = false;
}
...
selectFromGallery() {
    var options = {
        sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this._camera.DestinationType.NATIVE_URI
    };
    this._camera.getPicture( options ).then(( imagePath ) => {
        this.filePath.resolveNativePath(imagePath).then(filePath => {
            this.cameraUrl = filePath;
            this.photoSelected = true;
            this.photoTaken = false;
        });
    });
}

Also did: 也做了： 

$ ionic plugin add cordova-plugin-filepath

But now I get the following error: 但现在我收到以下错误： 

Runtime Error
Uncaught (in promise): Error: No provider for FilePath! Error at g (http://192.168.1.202:8100/build/polyfills.js:3:7133) at injectionError (http://192.168.1.202:8100/build/main.js:1511:86) at noProviderError (http://192.168.1.202:8100/build/main.js:1549:12) at ReflectiveInjector_._throwOrNull (http://192.168.1.202:8100/build/main.js:3051:19) at ReflectiveInjector_._getByKeyDefault (http://192.168.1.202:8100/build/main.js:3090:25) at ReflectiveInjector_._getByKey (http://192.168.1.202:8100/build/main.js:3022:25) at ReflectiveInjector_.get (http://192.168.1.202:8100/build/main.js:2891:21) at AppModuleInjector.NgModuleInjector.get (http://192.168.1.202:8100/build/main.js:3856:52) at resolveDep (http://192.168.1.202:8100/build/main.js:11260:45) at createClass (http://192.168.1.202:8100/build/main.js:11128:32) at createDirectiveInstance (http://192.168.1.202:8100/build/main.js:10954:37) at createViewNodes (http://192.168.1.202:8100/build/main.js:12303:49) at createRootView (http://192.168.1.202:8100/build/main.js:12208:5) at callWithDebugContext (http://192.168.1.202:8100/build/main.js:13339:42) at Object.debugCreateRootView [as createRootView] (http://192.168.1.202:8100/build/main.js:12800:12)
Stack
Error: Uncaught (in promise): Error: No provider for FilePath!
Error
    at g (http://192.168.1.202:8100/build/polyfills.js:3:7133)
    at injectionError (http://192.168.1.202:8100/build/main.js:1511:86)
    at noProviderError (http://192.168.1.202:8100/build/main.js:1549:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.1.202:8100/build/main.js:3051:19)
    at ReflectiveInjector_._getByKeyDefault (http://192.168.1.202:8100/build/main.js:3090:25)
    at ReflectiveInjector_._getByKey (http://192.168.1.202:8100/build/main.js:3022:25)
    at ReflectiveInjector_.get (http://192.168.1.202:8100/build/main.js:2891:21)
    at AppModuleInjector.NgModuleInjector.get (http://192.168.1.202:8100/build/main.js:3856:52)
    at resolveDep (http://192.168.1.202:8100/build/main.js:11260:45)
    at createClass (http://192.168.1.202:8100/build/main.js:11128:32)
    at createDirectiveInstance (http://192.168.1.202:8100/build/main.js:10954:37)
    at createViewNodes (http://192.168.1.202:8100/build/main.js:12303:49)
    at createRootView (http://192.168.1.202:8100/build/main.js:12208:5)
    at callWithDebugContext (http://192.168.1.202:8100/build/main.js:13339:42)
    at Object.debugCreateRootView [as createRootView] (http://192.168.1.202:8100/build/main.js:12800:12)
    at g (http://192.168.1.202:8100/build/polyfills.js:3:7133)
    at l (http://192.168.1.202:8100/build/polyfills.js:3:6251)
    at http://192.168.1.202:8100/build/polyfills.js:3:6805
    at t.invokeTask (http://192.168.1.202:8100/build/polyfills.js:3:15213)
    at Object.onInvokeTask (http://192.168.1.202:8100/build/main.js:4415:37)
    at t.invokeTask (http://192.168.1.202:8100/build/polyfills.js:3:15134)
    at n.runTask (http://192.168.1.202:8100/build/polyfills.js:3:10390)
    at a (http://192.168.1.202:8100/build/polyfills.js:3:5313)

[EDIT 2] [编辑2]

Ont top of [EDIT 1] I did the following edition: 在[EDIT 1]顶部，我做了以下版本： 

@Component( {
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [ FilePath ]
})

I'm not getting errors this time but the image is not loading. 这次我没有收到错误，但图片没有加载。 I used a text area to see the what src value is passed to the image. 我使用文本区域来查看传递给图像的src值。

I also noticed that now I'm getting the real path (that's good). 我也注意到现在我正在走上真正的道路（这很好）。

Maybe now is a matter of permissions of the embedded webview . 也许现在是嵌入式webview的权限问题。 Please, check this link: https://forum.ionicframework.com/t/no-local-image-showing-in-view-on-device/30647 请查看以下链接： https ： //forum.ionicframework.com/t/no-local-image-showing-in-view-on-device/30647

I think I'm getting closer. 我想我越来越近了。

Here is an screenshot of my phone: 这是我手机的screenshot ：

在此输入图像描述

[EDIT 3] [编辑3]

I'm running on a real Android device with this commnad: 我running一个真正的Android这个commnad设备： 

$ ionic run android -l

1 个解决方案

解决方案1
 2 已采纳  2017-04-24 09:35:17

First of all you should follow the usage method in the Ionic2 doc, instead of the one in plugin doc. 首先，您应该遵循Ionic2文档中的使用方法，而不是插件文档中的使用方法。

Check the Ionic2 Doc here https://ionicframework.com/docs/native/file-path/ 在这里查看Ionic2 Doc https://ionicframework.com/docs/native/file-path/

First import the FilePath 首先导入FilePath 

import { FilePath } from '@ionic-native/file-path';

Secondly add FilePath to your constructor 其次，将FilePath添加到构造函数中 

constructor( 
  public navCtrl: NavController, 
  private _DomSanitizationService: DomSanitizer, 
  private _camera: Camera,
  private filePath: FilePath
) {
    this.photoTaken = false;
}

Then use it like this in your code: 然后在你的代码中使用它： 

selectFromGallery() {
    var options = {
        sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this._camera.DestinationType.NATIVE_URI
    };
    this._camera.getPicture( options ).then(( imageData ) => {
        //use this.filePath instead of window.FilePath
        this.cameraUrl = this.filePath.resolveNativePath(imageData); 
        this.photoSelected = true;
        this.photoTaken = false;
    }, ( err ) => {
        // Handle error
    });
}

Edit: since the poster is using Ionic 3.0.1 a provider need to be added else will result in no provider FilePath error. 编辑：由于海报使用Ionic 3.0.1，需要添加提供程序，否则将导致no provider FilePath错误。

Add the provider inside @Component like so: 在@Component中添加提供程序，如下所示： 

@Component({
  ...
  providers: [ FilePath ],
 ...
})

Hope this helps! 希望这可以帮助！ ^_^ ^ _ ^

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Cordova插件不起作用（未定义） - Cordova plugin not working (not defined) Cordova联系人插件不起作用 - Cordova contact plugin not working 科尔多瓦相机插件不起作用 - Cordova camera plugin not working Cordova NFC 插件不起作用 - Cordova NFC plugin not working Cordova zip插件不起作用 - Cordova zip plugin not working Cordova Geofencing插件不起作用 - Cordova Geofencing plugin not working 科尔多瓦设备插件不工作 - Cordova device plugin not working Cordova插件安装无法正常工作 - Cordova plugin installation is not working Cordova 3.5插件不起作用 - Cordova 3.5 plugin not working 科尔多瓦电池插件不起作用 - Cordova Battery Plugin not working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM