使用文件传输插件时出现错误-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');
    })
}

我在logcat Android Studio中收到此错误：

“ TypeError：无法读取未定义的属性'constructor'”

我发现代码可以很好地工作到这一行

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文档：https：//ionicframework.com/docs/v3/native/file-transfer/