使用文件传输插件时的错误 - 离子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中此错误：

“类型错误：无法读取属性‘构造’的未定义”

我发现代码工作得很好，直到它到达这条线

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

Answer 1

您使用了错误的本地插件版本，对于离子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';

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

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

Answer 2

你可能会错过进口后这一行：

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

这至少表明documentation什么。