科尔多瓦插件不起作用

Posted 2023-03-13

【中文标题】科尔多瓦插件不起作用

【英文标题】：Cordova Plugin not working

【发布时间】：2017-09-20 07:12:38

【问题描述】：

我正在尝试使用Cordova 插件：cordova-plugin-filepath

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

在Corodva / Ionic (android) 应用程序上。

我正在尝试使用与上述网址相同的代码，我的意思是：

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

但我明白了：

  [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;

我是否必须以某种方式导入window？

我正在使用这个插件来转换文件的路径：

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

到：

/storage/sdcard/...

这是我的环境信息：

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

以防万一，我在这里删除代码：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
        );
    

知道如何使这个插件工作吗？

[编辑 1]

我通过以下方式修改了源代码：

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;
        );
    );

也做了：

$ ionic plugin add cordova-plugin-filepath

但现在我收到以下错误：

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)

[编辑 2]

在[EDIT 1] 的顶部，我做了以下版本：

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

这次我没有收到错误，但图片没有加载。我使用了一个文本区域来查看传递给图像的 src 值。

我还注意到，现在我得到了真正的路径（这很好）。

现在可能是嵌入式webview 的权限问题。请检查此链接：https://forum.ionicframework.com/t/no-local-image-showing-in-view-on-device/30647

我想我越来越近了。

这是我手机的screenshot：

[编辑 3]

我是running，在一个真正的Android 设备上使用这个命令：

$ ionic run android -l

【参考方案1】：

首先你应该遵循 Ionic2 文档中的使用方法，而不是插件文档中的使用方法。

在此处查看 Ionic2 文档 https://ionicframework.com/docs/native/file-path/

首先导入FilePath

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

第二次将FilePath 添加到你的构造函数中

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(( imageData ) => 
        //use this.filePath instead of window.FilePath
        this.cameraUrl = this.filePath.resolveNativePath(imageData); 
        this.photoSelected = true;
        this.photoTaken = false;
    , ( err ) => 
        // Handle error
    );

编辑：由于海报使用的是 Ionic 3.0.1，因此需要添加提供程序，否则将导致 no provider FilePath 错误。

像这样在@Component 中添加提供者：

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

希望这会有所帮助！ ^_^

【讨论】：

谢谢，我想我越来越近了，但仍然没有工作。我在我的帖子上做了一个版本：[EDIT 1]。你能检查一下吗？

由于您使用的是 Ionic 3.0.1，因此您需要像这样在 @Component 中添加提供程序。 @Component( ... providers: [ FilePath ], ... )

越来越近，但还没有工作。我做了另一个版本：[EDIT 2].

您是在真实设备上运行还是在离子服务上运行？在浏览器上无法显示。

此图像路径不适用于 livereload。如果你只是 ionic run android 而没有 -l 它将完美地工作。