尝试在Ionic中执行文件传输时遇到未定义的提供程序错误

时间:2018-01-18 11:24:06

标签: ionic-framework file-transfer

我正在尝试从Flask服务器执行文件传输到Ionic3应用程序。基本上,我想要做的是将.vcf文件从服务器发送到应用程序,以便在应用程序中读取和显示它们。应用程序不需要将文件存储在任何形式的持久性内存中。

当我尝试这样做时,我收到了很多错误。我现在遇到的是:

Encountered undefined provider! Usually this means you have circular dependencies (might be caused by using 'barrel' index.ts files.

我尝试为file-transfer创建一个完整的单独提供程序文件,但这只是给了我其他错误。目前,抛出错误的.ts文件如下:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Transfer, TransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';


@IonicPage()
@Component({
  selector: 'page-quiz',
  templateUrl: 'quiz.html',
  providers: [Transfer, TransferObject, File]
})
export class QuizPage {

  storageDirectory: string = '';

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private transfer: FileTransfer, private file: File) {
      this.vCardDownload("b734cdc8-8ec1-4fde-b918-b6062b5099df");
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad QuizPage');
  }

  vCardDownload(uuid) {

      const fileTransfer: TransferObject = this.transfer.create();

      const vCardLocation = 'http://xxxxxxx.xxx.edu:5000/get_question_vCard?uuid=' + uuid;

      fileTransfer.download(vCardLocation, this.file.applicationDirectory + uuid).then((entry) => {
        console.log("file was downloaded", entry.toURL());
        alertSuccess.present();
      }, (error) => {
        console.log("ERROR file was not downloaded");
      });
  }

}

我在哪里错了,如何实现文件传输?我认为我正在努力让它发挥作用 - 我对打字稿和移动开发很新,所以我提前为任何错误道歉。基本上我想“在应用程序中捕获文件”。

1 个答案:

答案 0 :(得分:0)

事实证明我有两个错误。首先,我的import语句是错误的。其次,我没有将某些导入添加到我的app.module.ts文件中的提供商列表中。

以下是app.module.ts中的提供商:

import { File } from '@ionic-native/file';
import { FileTransfer } from '@ionic-native/file-transfer';

... declarations, imports, etc. ...

providers: [
  StatusBar,
  SplashScreen,
  File,
  FileTransfer,
  {provide: ErrorHandler, useClass: IonicErrorHandler}
]

以下是我用来下载.vcf文件的示例代码。

import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file'; 

...

constructor(public navCtrl: NavController, public navParams: NavParams,
    private transfer: FileTransfer, private file: File) {
      this.vCardDownload("XXXXXX-XXXXX-XXXX-XXXX");
  }

...

vCardDownload(uuid) {

      console.log("Trying to download vCard!");

      const fileTransfer: FileTransferObject = this.transfer.create();

      const vCardLocation = 'http://XXXXXX.XXX.edu:5000/get_question_vCard?uuid=' + uuid;

      fileTransfer.download(vCardLocation, this.file.dataDirectory + 'file.vcf').then((entry) => {
        console.log('download complete: ' + entry.toURL());
      }, (error) => {
        console.error(error);
      });
  }

请注意,到目前为止,这仅适用于移动设备。