使用文件传输插件时的错误- Ionic 3

Question

我正在尝试将图像上传到我的服务器

"cordova-plugin-file-transfer": "^1.7.1",

"@ionic-native/file-transfer": "^5.0.0",

component.ts

takePicture() {
  const options: CameraOptions = {
    quality: 50,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth: 500,
    targetHeight: 500,
    saveToPhotoAlbum: false
  };

  this.camera.getPicture(options)
  .then((imageData) => this._img.uploadImage(imageData))
  .catch(err => console.log(err));
}

imageProvider.ts

import { FileTransfer, FileUploadOptions, FileTransferObject } from "@ionic-native/file-transfer/ngx";

   ...

uploadImage(img) {

  const url = `${this.apiURL}/images/upload`;

  // File for Upload
  var targetPath = img;

  var options: FileUploadOptions = {
    fileKey: 'image',
    chunkedMode: false,
    mimeType: 'multipart/form-data'
  };

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

  fileTransfer.upload(targetPath, url, options)
    .then(() => {
      console.log('good');
    }, (err) => {
      console.log('bad');
    })
}

我在中得到了这个错误：

"TypeError:无法读取未定义的属性‘构造函数’“

我发现代码在到达这一行之前运行良好。

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

Answer 1

您使用错误的本机插件版本，对于Ionic 3，您应该使用版本4。

ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer@4

而且，不将ngx追加到导入的末尾。

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

为了您将来的参考，如果您正在使用Ionic 3，请遵循Ionic v3文档而不是最新的文档。

V3 docs：https://ionicframework.com/docs/v3/native/file-transfer/

Answer 2

您可能在导入之后遗漏了这一行：

constructor(private transfer: FileTransfer, private file: File) { }

这至少是文档的建议。